jQuery追加和綁定點擊事件使用

Question

我試圖創建一個表中的一個按鈕，當它被點擊時創建一個新的錶行。新行也有相同的「添加行」按鈕，我希望能夠點擊該按鈕添加另一行。但我似乎無法將click事件綁定到click事件中附加的元素。我確信我錯誤地使用了「on」，但我似乎無法弄清楚如何做到這一點。

http://jsfiddle.net/vivojack/WkfvC/2/

我（簡化）HTML

<table id="ct"> 
    <tbody> 
    <tr id="list_items_11" class="list_item"> 
     <td>This Line</td> 
     <td><input type="button" name="addNewArea" class="addNewArea button" value="+"></td> 
     </tr> 
    </tbody> 
</table> 

我（簡化）的JavaScript

$('#ct tbody tr td').on('click', '.addNewArea', function(event) { 
    var areaCount = $('#ct tbody tr').length; 
    var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>'; 
    $(newAreaLine).appendTo('#ct tbody'); 
    $(this).remove(); 
}); 

在此先感謝。

Answer 1

您必須將處理程序綁定到非動態元素。您正嘗試綁定到td，這在執行綁定時不存在。您可以綁定表來代替：

http://jsfiddle.net/TMvN6/

$('#ct').on('click', '.addNewArea', function(event) { 

Answer 2

工作演示http://jsfiddle.net/Z5Vvc/

你可以嘗試簡單地將其連接到它現在增加了「+」等等等等的$(document).on(向前。如果你熱衷的話，Doc鏈接可以閱讀。

API文檔：.on - http://api.jquery.com/on/

希望這有助於你的需要:)

代碼

$(document).on('click', '.addNewArea', function(event) {  
    var areaCount = $('#ct tbody tr').length; 
    var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>'; 
    $(newAreaLine).appendTo('#ct tbody'); 
    $(this).remove(); 
});