【笔记】jQuery中动态添加的元素事件绑定

近日，在使用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>