CODEWITHSUNDEEP
jqueryhtml
Ravindra Bhanderi
Ravindra Bhanderi

Reputation: 2936

How to prevent multiple fire event on single element

my problem is i load content section through ajax in, content section also have script once they load work properly but next time they load then every jquery event work multiple time my content section code as below

<script>

    /*add education section*/
    $('body').on('click','.add-education-detail',function (e) {

         e.stopImmediatePropagation();
         e.preventDefault();

         if(! confirm('Are you Sure ?')) {

             return false;
         }
         html = ' <div class="row card-body">\n' +
             '            <div class="col-md-6 ">\n' +
             '                <div class="form-group row">\n' +
             '                    <div class="col-sm-10">\n' +
             '                        <input type="text" name = "education[]" class="form-control" size="7" placeholder="Enter Education" required></input>\n' +
             '                    </div>\n' +
             '                </div>\n' +
             '                <div class="form-group row">\n' +
             '                    <div class="col-sm-10">\n' +
             '                        <input type="text" name = "class[]" class="form-control" size="7" placeholder="Enter Class"></input>\n' +
             '                    </div>\n' +
             '                </div>\n' +
             '                <div class="form-group row">\n' +
             '                    <div class="col-sm-10">\n' +
             '                        <input type="text" name = "passing_year[]" class="form-control" size="7" placeholder="Enter Passing Year"></input>\n' +
             '                    </div>\n' +
             '                </div>\n' +
             '            </div>\n' +
             '            <div class="col-md-6">\n' +
             '                <div class="form-group row">\n' +
             '                    <div class="col-sm-10">\n' +
             '                        <input type="text" name = "percentage[]" class="form-control" size="7" placeholder="Enter Percentage"></input>\n' +
             '                    </div>\n' +
             '                </div>\n' +
             '                <div class="form-group row">\n' +
             '                    <div class="col-sm-10">\n' +
             '                        <input type="text" name = "bourd_university[]" class="form-control" size="7" placeholder="Enter Board/University"></input>\n' +
             '                    </div>\n' +
             '                </div>\n' +
             '                 <div class="form-group row">\n' +
             '                    <div class="col-sm-10">\n' +
             '                            <a class="btn btn-danger delete-education-detail">Remove</a>\n' +
             '                    </div>\n' +
             '                </div>'+
             '            </div>\n' +
             '        </div>';


        $('#education-detail-section').append(html);
        total_education(1);

        });




</script>

and the html as already have on master but the script is loaded as a content ,

Upvotes: 0

Views: 41

Answers (1)

4b0
4b0

Reputation: 22323

Using off() you can prevent event handlers to attach them multi-pal times.

$('body').off().on('click','.add-education-detail',function (e) {
   // Your other code
});

Upvotes: 1

Related Questions