便宜vps推荐
搬瓦工优惠|主机测评网!

jQuery.on()事件委派点击后执行两次事件问题

今天利用js的.on()事件委派给元素下的所有A标签设置点击事件,发现每次点击A标签会执行两次事件。

查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法:

e.stopPropagation();

但是发现问题还是没有解决。后面自己慢慢搜索资料发现下面两种方法可以解决此问题

每次绑定之前先去掉之前的绑定,用.off()或者.unbind()方法都可以,下面是off的代码示例:

$("li.taskli").off('click','a').on('click','a',function(e){ //在on绑定前调用off去除绑定
    //$(document).on('click','li.taskli a',function(e) {  //原先的写法
        console.log("here")
        if ($(this).parent().find('div.popover').size()>0)
        {
            $(this).popover('destroy')
        }else{        
            var uuid = $(this).attr('targetuuid');
            var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
            $(this).popover({
                placement:'bottom',
                title:uuid,
                html:'true',
                content:taskhtml
            }).popover('toggle');
            
            getResultFromFile(uuid)
        }
        e.stopPropagation();    //阻止冒泡
    })	

.unbind方法也是一样的用,把off替换成unbind即可。

以上代码就是把事件绑定抽离出来,不要让绑定事件每次都执行,实现事件委派每次点击只执行一次。

赞(0)
未经允许不得转载:雪花测评 » jQuery.on()事件委派点击后执行两次事件问题
分享到: 更多 (0)

推荐使用腾讯云轻量级应用服务器建站,开箱即用:点我进入