jQuery與動態生成的元素

Question

我已經用jQuery工作了兩個星期，我注意到它與原始HTML文檔中的對象一起工作正常，但是當我使用jQuery生成一個新元素時，庫沒有得到它的任何事件。

假設我嘗試運行這樣的事情：

$('.whatever').click(function() {
  alert("ALERT!");
});

如果HTML確實有這樣的東西：

<span class="whatever">Whatever</span>

然后點擊Whatever這個詞給我一個很好的警報。

但是如果使用jQuery動態添加span元素，則單擊它時沒有任何反應。

有沒有辦法讓jQuery與這些元素一起工作？

Answer 1

那是因為:( _更正）

$('.whatever').click(function() {
  alert("ALERT!");
});   

用字面意思表示：

Find all elements currently on the page that have the class ".whatever"
Foreach element in that result set, bind this function to its click event

所以很自然地，添加一個新的DOM元素不會自動應用點擊。

解決此問題的最佳方法是在插入階段創建綁定，即：

  var x = document.createElement("span"); 
  $(x).click(function(){ });  //etc 
  $(somcontiner).append(x); 

簡單地重新綁定一切的警告

如果做錯了，它可能會導致不良影響，即使事件觸發事件增加的次數。 要停止此操作，您可能需要首先取消綁定它們以刪除先前的通行證綁定。

即

$(x).click(foo); 
$(x).click(bar);  //foo and bar should both execute. 

所以要阻止這一點，你需要

$(x).unbind("click");
$(x).click(foo); 

重新綁定。

Answer 2

如果您有jQuery 1.3或更高版本，請嘗試使用live將事件添加到動態生成的元素：

$('.whatever').live("click", function() {
  alert("ALERT!");
});

Answer 3

謝謝大家。

不知怎的，我認為jQuery只需將它們添加到任何地方就可以自動將元素添加到DOM中。

我還發現了一些關於這個主題的額外信息：

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

http://learningjquery.com/2008/03/working-with-events-part-1

http://learningjquery.com/2008/05/working-with-events-part-2

以防其他人需要它。

Answer 4

你需要重新綁定它。

function bindme(){
    $('.whatever').click(function(){
        alert('binded');
    });
};

bindme();

//function that will generate something

function foo(){
   $('.whatever').val('oryt');
   bindme();//rebind itagain
}

Answer 5

另請參閱reglib ，這是一個類似的庫，允許您正在尋找的編程風格。

Answer 6

此外，還有一個非常出色的jQuery插件可以解決這個問題，稱為livequery