jQuery中动态创建元素节点无法触发事件
动态创建代码,如下:
<div class="a">点击添加动态元素</div>
<p class="b"></p> <!--动态节点放在p标签中-->
$(".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(){});