近日,在使用jQuery动态添加元素,需要进行事件的绑定时发现,无法绑定事件到动态生成的元素上
百度后,发现需要写成$(document).on('click','.cancel',function(){});
然后就看了下on()与delegate()的区别
在查看api后发现,on()的第一个属性是事件type,第二个属性是选择器selector,第三个就是事件function
delegate()的第一个属性是selector,第二个属性是type,第三个是事件function
如下代码,都可以实现动态添加的元素绑定事件
<script type="text/javascript">
$(function(){
var div = "<div class='item'><a class='cancel'>X</a></div>";
$(".btn").click(function(){
$(this).before(div);
});
// $(document).delegate('.cancel','click',function(event) {
// $(this).parent('.item').remove();
// });
$(document).on('click','.cancel',function(event) {
$(this).parent('.item').remove();
});
});
</script>
html结构为:
<pre name="code" class="html"><div class="container">
<div class='btn'>+</div>
</div>