在jQuery中的事件委託，怎麼做？

Question

在JavaScript中我曾經使用事件代表團是這樣的：

someDiv.addEventListener('click', function(evt){ 
    if(evt.target.id == "#someChild"){ 
     // Do something.. 
    } else if(evt.target.id == "#anotherChild"){ 
     // Do something else.. 
    } 
}, false); 

什麼是這個jQuery中的相同呢？我知道.on()，但如何在事件委派中使用它？我的意思是這是如何做到這一點：

someDiv.on('click, '#someChild, #anotherChild", function(evt){ 
     if($(this).is("#someChild")){ 
      // Do something.. 
     } else if($(this).is("#anotherChild")){ 
      // Do something else .. 
     }  
}); 

但它不會只是在香草JavaScript？我想知道是否有更好的方法來實現它。如果這是唯一的方法，jQuery比JS更有什麼好處？

Answer 1

你可以這樣做：

$(someDiv).on('click', '#someChild, #anotherChild', function(){ 
    if(this.id ==='someChild'){ 
     // Do something.. 
    } else if(this.id === 'anotherChild'){ 
     // Do something else .. 
    }  
}); 

或者創建兩個事件處理程序，如果你的兩個元素做不同的事情呢：

$(someDiv).on('click', '#someChild', function(){ 
    // Do something..  
}).on('click', '#anotherChild', function() { 
    // Do something else .. 
}); 

但它不會是一樣的，如香草JavaScript？我想知道是否有更好的方法來實現它。如果這是唯一的方法，jQuery比JS更有什麼好處？

當然，它基本上是一樣的，jQuery通過提供DOM API的包裝來讓你的生活變得更容易，但它不會改變DOM的工作方式。

雖然有區別，即this將引用選擇器匹配的元素，而不是處理程序綁定到的元素。

一般來說，優點是jQuery代碼是更跨瀏覽器比使用addEventListener兼容。

Answer 2

使用jQuery你會做這樣的：

function onButtonClick(e) { 
    //this = the button that was clicked 

} 

$(document.body).on('click','button',onButtonClick) 

您可以閱讀文檔here

Answer 3

你可以從這裏開始，如果是動態創建此元素，並沒有出現在頁面加載

$(document).on('click', '#someChild', function(evt) { 
    // Do something..  
}); 

如果創建的元素呈現在頁面之前，那麼這將工作

  <input type="button" onclick="fnClickfn();" id="xxx" /> 

編輯：

哦，還.on只能在以後的版本上的jQuery（我覺得1.6及以上），所以請確保您不使用的舊版本，將需要.live和.die。