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

Question

我正在使用 jQuery 將 function 附加到整個 class 的點擊事件中。例如：

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

在我的客戶端 javascript 上，我動態創建了更多.clickDiv實例。
我是否需要再次調用$(".clickDiv).click(function...) ，或者新實例是否會自動將 function 綁定到點擊事件？

Answer 1

是的，除非您使用delegate event

像這樣：

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

on文檔上：

如果省略選擇器或為 null，則事件處理程序稱為直接或直接綁定。 每次在選定元素上發生事件時都會調用處理程序，無論它是直接發生在元素上還是從后代（內部）元素冒泡。

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

事件處理程序僅綁定到當前選定的元素； 它們必須在您的代碼調用.on() 時存在於頁面上。 為確保元素存在並可供選擇，請在頁面上 HTML 標記中的元素的文檔就緒處理程序內執行事件綁定。 如果新的 HTML 被注入到頁面中， select 元素和附加事件處理程序將在新的 HTML 之后被放置到頁面中。 或者，使用委托事件來附加事件處理程序，如下所述。

委托事件的優點是它們可以處理來自稍后添加到文檔的后代元素的事件。 通過選擇在附加委托事件處理程序時保證存在的元素，您可以使用委托事件來避免頻繁附加和刪除事件處理程序的需要。 例如，該元素可以是 Model-View-Controller 設計中視圖的容器元素，或者如果事件處理程序想要監視文檔中的所有冒泡事件，則為文檔。 文檔元素在加載任何其他 HTML 之前在文檔的頭部可用，因此可以安全地在此處附加事件而無需等待文檔准備就緒。

---

只是因為這里有太多人建議你應該使用live ， live從1.7版開始被on棄用，並在1.4.3版中被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

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. 

Answer 3

這會將事件綁定到所有新實例

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

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