詳解jQuery為動態產生的內容新增事件回應jQuery live()方法_jquery
- WBOY原創
- 2016-05-16 15:34:151331瀏覽
jQuery live()方法是為所有符合的元素附加一個事件處理函數，即使這個元素是以後透過append,prepend,after等事件產生後的內容也依然有效。
這個方法可以看做是 .bind() 方法的一個變體。使用 .bind() 時，選擇器所符合的元素會附加一個事件處理函數，而以後再新增的元素則不會有。為此需要再使用一次 .bind() 才行。比如說：
<body> <div class="clickme">Click here</div> </body>
可以為這個元素綁定一個簡單的click事件：
複製程式碼 程式碼如下:
$(' .clickme').bind('click', function() { alert(www.jb51.net); });
當點擊了元素，就會彈出一個警告框。然後，想像一下這之後有另一個元素添加進來了。
複製程式碼 程式碼如下:
$('body').append('
Another target
'); 儘管這個新的元素也能夠匹配選擇器 ".clickme" ，但是由於這個元素是在調用 .bind() 之後添加的，所以點擊這個元素不會有任何效果。
但live() 就提供了對應這種情況的方法。如果我們是這樣綁定click事件的：
複製程式碼 程式碼如下:
$('.clickme'). live('click', function() { alert("www.jb51.net"); });
這樣點選新增的元素，它依然能夠觸發事件處理函數。
事件委託
live() 方法能對一個還沒有加入DOM的元素有效，是由於使用了事件委託：綁定在祖先元素上的事件處理函數可以對在後代上觸發的事件作出回應。傳遞給 live() 的事件處理函數不會綁定在元素上，而是把他當作一個特殊的事件處理函數，綁定在 DOM 樹的根節點上。
在我們的例子中，點選新的元素後，會依序發生下列步驟：
1.產生一個click事件傳遞給
來處理。
2.由於沒有事件處理函數直接綁定在
2.由於沒有事件處理函數直接綁定在
上，所以事件冒泡到DOM樹上。
3.事件不斷冒泡一直到DOM樹的根節點，預設上面綁定了這個特殊的事件處理函數。
4.執行由 .live() 綁定的特殊的 click 事件處理函數。
5.這個事件處理函數先偵測事件物件的 target 來決定是不是需要繼續。
6.這個測試是透過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。
7.如果找到了匹配的元素，那麼就呼叫原始的事件處理函數。
8、由於只有在事件發生時才會在上面的第五步裡做測試，因此在任何時候添加的元素都能夠響應這個事件。
以上就是jQuery為動態產生的內容加入事件回應jQuery live()方法的詳細介紹，希望對大家的學習有所幫助。
3.事件不斷冒泡一直到DOM樹的根節點，預設上面綁定了這個特殊的事件處理函數。
4.執行由 .live() 綁定的特殊的 click 事件處理函數。
5.這個事件處理函數先偵測事件物件的 target 來決定是不是需要繼續。
6.這個測試是透過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。
7.如果找到了匹配的元素，那麼就呼叫原始的事件處理函數。
8、由於只有在事件發生時才會在上面的第五步裡做測試，因此在任何時候添加的元素都能夠響應這個事件。
以上就是jQuery為動態產生的內容加入事件回應jQuery live()方法的詳細介紹，希望對大家的學習有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn