jquery中對動態生成的標籤不會響應click事件

時間 2019-11-06

標籤 jquery 動態生成標籤不會響應 click 事件欄目 JQuery 简体版

原文原文鏈接

Jquery中對ajax動態生成的html標籤不會響應 $(selector).click(function.. 或者$(selector).bind('click',function.., 須要用.livehtml

jQuery 1.7 開始，再也不建議使用 .live() 方法。請使用 .on() 來添加事件處理。使用舊版本的用戶，應該優先使用 .delegate() 來替代 .live()。ajax

返回值:jQuerylive(type, [data], fn)

概述

jQuery 給全部匹配的元素附加一個事件處理函數，即便這個元素是之後再添加進來的也有效。閉包

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而之後再添加的元素則不會有。爲此須要再使用一次 .bind() 才行。好比說app

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

能夠給這個元素綁定一個簡單的click事件：函數

$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

當點擊了元素，就會彈出一個警告框。而後，想象一下這以後有另外一個元素添加進來了。測試

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

儘管這個新的元素也可以匹配選擇器 ".clickme" ，可是因爲這個元素是在調用 .bind() 以後添加的，因此點擊這個元素不會有任何效果。this

.live() 就提供了對應這種狀況的方法。若是咱們是這樣綁定click事件的：spa

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

而後再添加一個新元素：code

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

而後再點擊新增的元素，他依然可以觸發事件處理函數。orm

事件委託

.live() 方法能對一個尚未添加進DOM的元素有效，是因爲使用了事件委託：綁定在祖先元素上的事件處理函數能夠對在後代上觸發的事件做出迴應。傳遞給 .live() 的事件處理函數不會綁定在元素上，而是把他做爲一個特殊的事件處理函數，綁定在 DOM 樹的根節點上。在咱們的例子中，當點擊新的元素後，會依次發生下列步驟：

生成一個click事件傳遞給 <div> 來處理
因爲沒有事件處理函數直接綁定在 <div> 上，因此事件冒泡到DOM樹上
事件不斷冒泡一直到DOM樹的根節點，默認狀況下上面綁定了這個特殊的事件處理函數。
執行由 .live() 綁定的特殊的 click 事件處理函數。
這個事件處理函數首先檢測事件對象的 target 來肯定是否是須要繼續。這個測試是經過檢測 $(event.target).closest('.clickme') 可否找到匹配的元素來實現的。
若是找到了匹配的元素，那麼調用原始的事件處理函數。

因爲只有在事件發生時纔會在上面的第五步裏作測試，所以在任什麼時候候添加的元素都可以響應這個事件。

附加說明

.live() 雖然頗有用，但因爲其特殊的實現方式，因此不能簡單的在任何狀況下替換 .bind()。主要的不一樣有：

在jQuery 1.4中，.live()方法支持自定義事件，也支持全部的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合適，而且能夠冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定義事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 並不徹底支持經過DOM遍歷的方法找到的元素。取而代之的是，應當老是在一個選擇器後面直接使用 .live() 方法，正如前面例子裏提到的。
當一個事件處理函數用 .live() 綁定後，要中止執行其餘的事件處理函數，那麼這個函數必須返回 false。僅僅調用 .stopPropagation() 沒法實現這個目的。

參考 .bind() 方法能夠得到更多關於事件綁定的信息。

在jQuery 1.4.1中，你能夠一次綁定多個事件給 .live() ，跟 .bind() 提供的功能相似。

在jQuery 1.4 中，data參數能夠用於把附加信息傳遞給事件處理函數。一個很好的用處是應付由閉包致使的問題。能夠參考 .bind() 的討論來得到更多信息。

參數

typeString

事件類型

data (可選)Object

欲綁定的事件處理函數

fnFunction

欲綁定的事件處理函數

示例

描述:

點擊生成的p依然據有一樣的功能。

HTML 代碼:

<p>Click me!</p>

jQuery 代碼:

$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

描述:

阻止默認事件行爲和事件冒泡，返回 false

jQuery 代碼:

$("a").live("click", function() { return false; });

描述:

僅僅阻止默認事件行爲

jQuery 代碼:

$("a").live("click", function(event){
  event.preventDefault();
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。