jquery绑定事件失效的情况

现在的web项目，不使用jquery的恐怕极少。但是在使用jquery时，也会发现一些异常的情况。
一般我们如下绑定点击等事件：

<div class="music">		
	<ul>			 			
		<li>01.mp3</li>
		<li>02.mp3</li>			
	</ul>	
</div>


$(function(){	
	$(".music").find("li").on('click',function(){
		$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
	});
	//... ...
});

因为该绑定事件是在一打开网页时，就进行了绑定，对于页面上已经存在的符合条件的 li 标签绑定了点击事件，但是如果在打开网页之后，通过 jquery 函数 append('<li> ....</li>')或者
prepend('<li>....</li>') 再一次插入页面上的 li 元素就不在上面的绑定范围之内了，因为这些 li 元素是在 $(function(){...}); 执行之后，才出现在页面上的。所以理所当然，就不受他的控制了。

解决方法形如下面处理：
[color=darkred]1.方法一[/color]：
append('<li οnclick="some_function()">....</li>');
这样处理就行了，就是在创建 li 标签的时间，内联绑定 onclick 事件来处理，就像css样式内联一样。这是最简单的处理方法，但是这样的话事件和html就绑定在一起了，代码耦合太过了。

[color=darkred]2.方法二[/color]：
可以在[color=darkred]li元素的共同的祖先元素比如ul中进行绑定事件[/color]，这样即使是后面插入的li，也会因为事件冒泡机制而触发事件，而得到执行。

$(function(){
	$(".music").find("ul").on('click', function(){
		$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
	});
});

但是在祖先元素上绑定事件，有个缺点，即 this 对象发生了变化，this对象变成了祖先元素，要特别注意这点，如果代码中要使用到this对象，比如本例中。那么就会发生错误！所以上面的代码其实是错误的。但是此时也还是有解救的方法：

$(function(){
	$(".music").find("ul").on('click', 'li', function(){
		alert(this);	//[object HTMLLIElement]
		alert(event.target);	//[object HTMLLIElement]
		alert(event.currentTarget);	//[object HTMLLIElement]
		$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
	});
});

[color=darkred]使用事件的委托机制[/color]，加入一个过滤的参数 'li' ，此时代码中的 this 对象就是 li 而不是他的祖先 ul 了。我们看到this==event.target==event.currentTarget

所以在使用冒泡机制的事件委托时，如果使用到了 this 对象，一定要将实际的那个点击对象，通过过滤参数参入进去。这样 this 对象才是那个实际点击的对象，不然this对象就成了选择对象了。

我们查看jquery的文档如下：
返回值:jQuery on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

[color=darkred]3.方法三[/color]
使用event的属性target。我们知道每一个事件都有一个event对象，他的event.target就是我们直接点击的对象，而event.currentTarget是事件冒泡过程中冒泡到哪里，就代表哪个对象，所以冒泡结束时event.currentTarget代表的就是我们在哪个父元素上绑定事件，他就代表哪个对象，我们可以使用下面的代码进行测试：

$(".music").find("ul").on('click',function(event){
		alert(this);	//[object HTMLUListElement]
		alert(event.target);	//[object HTMLLIElement]
		alert(event.currentTarget);	//[object HTMLUListElement]
		$("#myAudio").attr("src", "music/"+$.trim($(event.target).text()));
	});

我们在li的父元素ul上进行绑定，那么冒泡结束，也就是事件进行处理时，this代表的是event.currentTarget，而不是event.target。上面我们可以清楚的看到这一点！清楚了这一点，我们就可以使用 event.target 来获取我们直接点击的那个对象，获得他的属性，设置他的属性，对他进行各种操作。[color=darkred]我们一定要明白this 和 event.target, event.currentTarget三者的联系和区别。在利用冒泡机制进行事件处理时，一定不要错误地将this 和 event.target等同![/color]

[color=darkred]3.方法四[/color]
使用jquery的live()函数来绑定事件，但是jquery-1.11.1已经不支持live()函数了。从1.7开始推荐使用delegate函数来代替。

[color=darkred]3.方法四[/color]
使用delegate()函数：

$(".music").find("ul").delegate('li', 'click', function(event){
		alert(this);	//[object HTMLLIElement]
		alert(event.target);	//[object HTMLLIElement]
		alert(event.currentTarget);	//[object HTMLLIElement]
		$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
	});

我们看到使用delegate()函数是，this == event.target == event.currentTarget.所以此时可以使用this来获得我们直接点击的那个元素。
jquery文档：
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）

从上面我们可以看到，加入了过滤参数的on绑定函数和delegate函数是等价的。所以目前推荐一切事件绑定都使用on函数，因为在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，完全取代 .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。

[color=darkred]我们甚至可以将事件绑定到body上[/color]：

$("body").on('click', '.music li', function(event){
		alert(this);	//[object HTMLLIElement]
		alert(event.target);	//[object HTMLLIElement]
		alert(event.currentTarget);	//[object HTMLLIElement]
		$("#myAudio").attr("src", "music/"+$.trim($(this).text()));
	});

总结：
1）理解 event, event.target, event.currentTarget, this
2）事件冒泡机制
3）一切事件绑定事件推荐使用on函数，事件代理一定要指定on函数的过滤参数，也就是event。target对象。
4）非事件代理中，this, event.currentTarget 都是变化的，event.target始终指向直接触发事件的那个元素。但是在事件代理中，三者是一致的，都是指直接触发事件的元素。