美文网首页
jquery live事件阻止冒泡及解决办法

jquery live事件阻止冒泡及解决办法

作者: zweilong | 来源:发表于2017-09-12 09:25 被阅读0次

动态添加标签的live事件

注:jquery版本1.8之后不在支持live事件

在实际项目中遇到的问题,动态添加的标签
live阻止冒泡失效,无论是用return false还是用e.stopPropagation()都不能阻止冒泡发生
以下是自己总结的例子

html
<div id="box"> 
  <a href="javascript:;" class="delete">init html</a>
</div> 

<button id="add">add html</button>
jq
 $(function() {

     // 用click事件
    $(document).click( function(event) {
        console.log('click');
        event.stopPropagation();
    });

    // 用delegate事件
    $(document).delegate('.delete','click', function(event) {
        console.log('delegate');
        event.stopPropagation();
    });

    // 用live事件
    $('.delete').live('click', function(event) {
        console.log('live');
        event.stopPropagation();
        //return false;
    });

    // 新添加的a标签
    $('#add').click(function() {
        var html = '<a href="javascript:;" class="delete">new html 1</a>';
        $('#box').append(html);
    });

    $('#box').click(function() {
        console.log('box emit');
    });

});

解决办法:
我们知道event.stopPropagation()对click阻止冒泡有效,那就可以在新动态添加的标签上绑定click事件。

大神们可畅所欲言,大家互相讨论;共同学习。
小Z(本人)自己总结的经验,有不足的地方请留言我修改。

相关文章

  • jquery live事件阻止冒泡及解决办法

    动态添加标签的live事件 注:jquery版本1.8之后不在支持live事件 在实际项目中遇到的问题,动态添加的...

  • jQuery动画、循环、事件

    jQuery动画 jQuery循环 元素绝对位置 鼠标移入移出 jQuery事件 自定义事件 事件冒泡 弹框-阻止冒泡

  • jQuery阻止冒泡事件

    测试代码 效果如图 当我们点击子元素(黄色区域)时会先触发子元素的点击事件,然后会继续触发父元素的点击事件,阻止冒...

  • 微信小程序中bind和catch的区别

    bindtap 冒泡事件,事件绑定不会阻止冒泡事件向上冒泡catchtap 非冒泡事件, 事件绑定阻止冒泡事件...

  • jQuery事件冒泡及解决办法

    事件冒泡: 什么是事件冒泡:在一个对象上触发某类事件(比如onclick事件),如果次对象定义了此事件的处理程序,...

  • jQuery事件冒泡及解决办法

    Version:1.0StartHTML:000000201EndHTML:000033241StartFragm...

  • jQuery事件冒泡及解决办法

    事件冒泡: 什么是事件冒泡:在一个对象上触发某类事件(比如onclick事件),如果次对象定义了此事件的处理程序,...

  • jQuery事件冒泡及解决办法

    事件冒泡: 什么是事件冒泡:在一个对象上触发某类事件(比如onclick事件),如果次对象定义了此事件的处理程序,...

  • jQuery事件冒泡及解决办法

    事件冒泡: 什么是事件冒泡:在一个对象上触发某类事件(比如onclick事件),如果次对象定义了此事件的处理程序,...

  • 阻止事件冒泡

    1、阻止事件冒泡 - jQuery的两种方式 2、取消默认行为 3、兼容写法

网友评论

      本文标题:jquery live事件阻止冒泡及解决办法

      本文链接:https://www.haomeiwen.com/subject/fnifsxtx.html