如何使用委托事件？

我正在使用一个事件来替换某些层中的“src”属性（

）：

 $('.playOnAP').on('click',function() { $('#mp3-list ul li',this).each( function( index, element ) { $('.total-title').eq(index).attr('src', $(this).text() ); }); 

并且它第一次工作，但是在Ajax请求之后，当$('.playOnAP')元素被替换时。 我猜我应该使用委托事件 ，但不要说清楚。

我试过下一个：

 $('.playOnAP').on('click','#mp3-list ul li',function() { $('.playOnAP #mp3-list ul li').on('click',function() { $('.playOnAP #mp3-list ul li').on('click','#mp3-list ul li',function() { 

但不起作用。

Answer 1

试试这个：

 $(document).on('click', '.playOnAP',function() { 

使用事件委派时，必须将事件绑定到最初在DOM中的元素。 如果动态替换了某些内容，则无法绑定到该内容。

正如Anup深刻地提到的，将click事件绑定到document并不是绝对必要的 – 任何父元素都会这样做，只要它最初在DOM中。

例如，如果.playOnAP是要替换的最顶层容器元素：

 
 
 //some stuff here 
  

你可以使用：

 $('#someDiv').on('click', '.playOnAP', function() { //do your stuff }); 

但是，默认情况下，你几乎总是使用$(document).on() （即使只是作为一个快速检查，以确保一切正常，然后缩小到最合适的元素）。

Answer 2

如果要替换.playOnAp，则需要将委托放在.playOnAp的父级上。 事件处理程序仅附加到添加事件处理程序时存在的DOM元素。