jQuery中动态创建元素节点无法触发事件

jQuery中动态创建元素节点无法触发事件

动态创建代码，如下：

<div class="a">点击添加动态元素</div>
<p class="b"></p> <!--动态节点放在p标签中-->12



$(".a").click(function(){
    var html = ‘<a class="btn">动态添加的按钮</a>’;
    $(".b").html(html);
})

给创建的”a”标签添加 click 事件

$(".btn").on("click",function(){
    alert(1)
})

这样无法触发alert，因为程序找不到此节点。
在jQuery中有“向未来的元素添加事件处理程序”方法说明，也正是动态创建元素无法触发事件的原因所在。
正确的写法应该是：

例如

$(‘父元素’).on(‘click’,’动态的子元素’,function(){});



$('.b').on('click','.btn',function(){
    alert("成功了")
});

这样就能正常的触发动态元素添加的事件。有童鞋说用live也可以做到，是的，只给动态元素绑定事件是可以做到的。如果稍微复杂一点其展现的效果就会和想要的结果有所不同吼。

上面是只给动态创建的元素btn绑定了事件。
现在如果 p 标签的本身就需要有click事件呢？

$(".b").click(function(){
    console.log("p标签有事件哦");
})
$(".a").click(function(){
    var html = ‘<a class="btn">动态添加的按钮</a>’;
    $(".b").html(html);
})
$('.b').live('click','.btn',function(){
    alert("btn标签绑定的事件触发啦，b标签的事件怎么也触发了呢？")
});

正义的童鞋提出了…你没加取消冒泡事件。现在加上看看效果

$('.b').live('click',function(e){
    e.stopPropagation();
    alert("b标签的事件还是触发了");
});
$('.b').on('live','.btn',function(e){
    e.stopPropagation();
    alert("b标签的事件还是触发了");
});

是不是也没父级事件一起触发的问题？

总结：
当动态创建元素的父级没有添加事件情况下，动态创建的元素可以用on或live绑定事件；
当动态创建元素的父级有绑定事件情况下，动态创建的元素用on

$('父元素').on('click','动态的子元素',function(){});

————————————————
版权声明：本文为CSDN博主「黑夜世界」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/amy_king_0/article/details/52182614