使用類選擇器附加事件處理程序是否會影響該類的動態添加元素？

Question

我正在使用jQuery將函數附加到整個類的單擊事件中。例如：

$(".clickDiv").click(function(){ 
    $(this).hide(); 
}); 

在我的客戶端JavaScript，我動態地創建更.clickDiv實例。
我是否需要再次調用$(".clickDiv).click(function...)，或者新實例是否會自動將該函數綁定到click事件？

Answer 1

是的，你做什麼，除非你使用一個delegate event

這樣的：

$('#container').on('click', '.clickDiv', function() { 
    $(this).hide(); 
}); 

ondocs：

如果選擇省略或爲空，事件處理程序被稱爲直接或直接綁定。每次在選定元素上發生事件時，都會調用處理程序，無論它是直接發生在元素還是來自後代（內部）元素的氣泡。

當提供選擇器時，事件處理程序被稱爲委託。當事件直接發生在綁定元素上時，不會調用該處理程序，而只會爲與選擇器匹配的後代（內部元素）調用該處理程序。 jQuery將事件從事件目標引發到處理程序所附的元素（即，最內層到最外層的元素），並沿着匹配選擇器的路徑上的任何元素運行處理程序。

事件處理程序僅綁定到當前選定的元素;它們必須在代碼調用.on（）時存在於頁面上。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入頁面，請在將新的HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委託事件來附加事件處理程序，如下所述。

委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中的視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此在不等待文檔準備就緒的情況下在其中附加事件是安全的。

---

只是因爲這裏太多人建議你應該使用live，live由on因爲1.7版本過時，通過delegate

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

Answer 2

這1.4.3版本取而代之的將事件綁定所有新實例

$('.clickDiv').live('click', function() { 
    $(this).hide(); 
}); 

http://api.jquery.com/live/

Answer 3

I am attaching an event like : 

$('body').on('click', 'button[data-tracking], a[data-tracking]', 

       function(event) { console.log($(event.target)); 
}); 

and want to get to the target of element which is set up as : 
    <pre> <[]a data-tracking="hello" href="hello"> 
    \<\span\>test now\<\/span\> 
    \<\/a\> 
</pre> 
it does work perfectly, but event.target gives me "span" element but what i want is "a" element so that I could get to value of data-tracking attribute.