动态添加的元素，绑定事件后点击一次触发多次问题

时间:2019-11-14 念初~逝水人气:1

使用js动态添加的元素，在html中写好的绑定事件不可用，可用以下方式触发

动态添加多个的html元素

addCell:function () {
    var cell = '<div>\n' +
        '          <button type="button" class="btn btn-default delCell" @click="delCell">新增</button>\n' +
        '       </div>';
    $('.addCell').before(cell)
}

此时调用addCell方法无效，只能通过dom绑定，此时方法可正常触发

$('body').on('click','.delCell',function () {
    event.stopPropagation();//阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
    $(this).parent().remove();
});

部分页面会出现新的问题，若方法中需要调用接口会发现点击一次接口被多次调用，出现这种问题是事件多次绑定导致，可在绑定事件前解绑元素

$(".delCell").unbind('click').click(function(){});

$('body').on('click','.delCell',function () {
    event.stopPropagation();//阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
    $(this).parent().remove();
});

若添加解绑事件扔会出现重复触发现象，可用闭包实现，闭包可以保存变量

for(var i=0;i<$(".delCell").length;i++){
    (function(i){
        $(".delCell")[i].onclick=function(){
            event.stopPropagation();
            $(this).parent().remove();
        }
    })(i);
}

加载全部内容