爲什麼jQuery.live函數不能使用靜態元素？

Question

我有一個動態HTML表格，我可以在其中添加和刪除行。 每行包含一個類別爲removeRow的按鈕。

在我的JavaScript，我有：

$('button.removeRow').live("click", function() { 
     var row = $(this).parents('tr') 
     row.remove(); 
     return false; 
}); 

的問題是，它適用於屬於頁面加載後插入（通過點擊「添加行」按鈕）行的所有按鈕。

它適用於現有的按鈕，只有當我改變了上面的代碼（但當時它並不適用於動態添加行工作）：

$('button.removeRow').click(function() { 
     var row = $(this).parents('tr') 
     row.remove(); 
     return false; 
}); 

我認爲，肝功能應該都工作，所以你能把我指向正確的方向嗎？哪裏出問題了？

Answer 1

好的，我今天發現了一個錯誤。在我的代碼中，我有：

$('input[type=submit], button').click(function() { 
      return false; 
}); 

我希望它與提交按鈕一起工作，所以它不會在點擊時提交表單。我不記得我爲什麼把按鈕放在那裏。無論如何，因爲我的靜態按鈕點擊附加了這個事件，而動態創建的不是。因此，實時'點擊'適用於動態按鈕。愚蠢的錯誤...

Answer 2

哈克解決方案：你既

$('button.removeRow').live("click", function() { 
     var row = $(this).parents('tr') 
     row.remove(); 
     return false; 
}); 

和

$('button.removeRow').click(function() { 
     var row = $(this).parents('tr') 
     row.remove(); 
     return false; 
}); 

，如果你發佈了一些例如HTML以及負責插入新行的代碼，雖然這將是有益的。

Answer 3

如果其他tr元素與您的.parents()選擇器匹配，可能是錯誤的。嘗試.closest()：

$('button.removeRow').live("click", function(){ 
    $(this).closest('tr').remove(); 
    return false; 
}); 

Answer 4

活應該動態和預渲染的元素工作。

我想通過鍛鍊開始，如果這些內容確實存在被運行的jQuery之前...嘗試輸出某處以下的結果，或使用debugger關鍵字，甚至是可怕的alert：

$('button.removeRow').length 
// The rest of your click handler definition...