Question

我的问题是我通过ajax加载内容部分，内容部分也有脚本一旦加载正常工作但下次加载然后每个jquery事件工作多次我的内容部分代码如下

<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>

并且html已经在master上，但脚本作为内容加载，

Answer 1

使用off()可以防止事件处理程序多次附加它们。

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

如何防止单个元素上的多个火灾事件

1 个答案: