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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

念初~逝水   2019-11-14 我要评论

使用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);
}

 

 

 

 

 

 

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们