詳解jQuery向動態生成的內容添加事件響應jQuery live()方法

2019-11-20 11:21:40

字體：大中小

來源：轉載

供稿：網友

jQuery live()方法是給所有匹配的元素附加一個事件處理函數，即使這個元素是以后通過append,prepend,after等事件生成后的內容也依然有效。
這個方法可以看做是 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而以后再添加的元素則不會有。為此需要再使用一次 .bind() 才行。比如說：

<body> <div class="clickme">Click here</div> </body>

可以給這個元素綁定一個簡單的click事件：

復制代碼代碼如下:

$('.clickme').bind('click', function() { alert(m.survivalescaperooms.com); });

當點擊了元素，就會彈出一個警告框。然后，想象一下這之后有另一個元素添加進來了。

復制代碼代碼如下:

$('body').append('<div class="clickme">Another target</div>');

盡管這個新的元素也能夠匹配選擇器 ".clickme" ，但是由于這個元素是在調用 .bind() 之后添加的，所以點擊這個元素不會有任何效果。
但live() 就提供了對應這種情況的方法。如果我們是這樣綁定click事件的：

復制代碼代碼如下:

$('.clickme').live('click', function() { alert("m.survivalescaperooms.com"); });

這樣點擊新增的元素，它依然能夠觸發事件處理函數。
事件委托
live() 方法能對一個還沒有添加進DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數可以對在后代上觸發的事件作出回應。傳遞給 live() 的事件處理函數不會綁定在元素上，而是把他作為一個特殊的事件處理函數，綁定在 DOM 樹的根節點上。
在我們的例子中，當點擊新的元素后，會依次發生下列步驟：
1、生成一個click事件傳遞給 <div> 來處理。
2、由于沒有事件處理函數直接綁定在 <div> 上，所以事件冒泡到DOM樹上。
3、事件不斷冒泡一直到DOM樹的根節點，默認情況下上面綁定了這個特殊的事件處理函數。
4、執行由 .live() 綁定的特殊的 click 事件處理函數。
5、這個事件處理函數首先檢測事件對象的 target 來確定是不是需要繼續。
6、這個測試是通過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。
7、如果找到了匹配的元素，那么調用原始的事件處理函數。
8、由于只有在事件發生時才會在上面的第五步里做測試，因此在任何時候添加的元素都能夠響應這個事件。
以上就是對jQuery向動態生成的內容添加事件響應jQuery live()方法的詳細介紹，希望對大家的學習有所幫助。

上一篇：基于jQuery實現自動輪播旋轉木馬特效

下一篇：jquery實現網頁的頁面平滑滾動效果代碼