【笔记】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>