jquery绑定事件失效的情况(转)

原文地址：http://www.thinksaas.cn/group/topic/348453/

jQuery中文api地址：http://www.jquery123.com/api/

jQuery官网api地址：http://api.jquery.com/

 

现在的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(){...}); 执行之后，才出现在页面上的。所以理所当然，就不受他的控制了。 解决方法形如下面处理： 1.方法一： append('<li onclick="some_function()">....</li>'); 这样处理就行了，就是在创建 li 标签的时间，内联绑定 onclick 事件来处理，就像css样式内联一样。这是最简单的处理方法，但是这样的话事件和html就绑定在一起了，代码耦合太过了。2.方法二： 可以在li元素的共同的祖先元素比如ul中进行绑定事件，这样即使是后面插入的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()));

});
});

使用事件的委托机制，加入一个过滤的参数 '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。 3.方法三 使用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 来获取我们直接点击的那个对象，获得他的属性，设置他的属性，对他进行各种操作。我们一定要明白this 和 event.target, event.currentTarget三者的联系和区别。在利用冒泡机制进行事件处理时，一定不要错误地将this 和 event.target等同! 3.方法四 使用jquery的live()函数来绑定事件，但是jquery-1.11.1已经不支持live()函数了。从1.7开始推荐使用delegate函数来代替。 3.方法四 使用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()。 我们甚至可以将事件绑定到body上：

$("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始终指向直接触发事件的那个元素。但是在事件代理中，三者是一致的，都是指直接触发事件的元素。