Jquery添加點擊事件後，在表中追加新行無功能

Question

這是我的問題，我在我的表中追加一個新的行。在這一行是一個按鈕，應該可以點擊並觸發一個事件。我發現噸的解決方案，但他們每個人都包含這樣：

.on('click', 'button', function(){  
//do something  
}); 

需要而對這個地方的函數調用一個解決方案（只激活點擊的可能性）。 reasen是，我有三個不同的ajax部分用於添加，編輯和刪除表格行。我通過contentEditable表來控制它。所以每一行都有一個按鈕來編輯和刪除這一行。如果我插入一個新行，新行將得到這些按鈕。爲了使運行我的按鈕就像上面的例子中，我得到的結構是這樣的：

// AJAX for edit row 
do something 

// AJAX for delete row 
do something 

// AJAX for add row 
$('#editTable > tbody:last').append('<tr><td><button>DELETE</button></tr><td>'); 

$('#table').on('click', 'button', function() { 
    // AJAX for delete row 
    do something 
}); 

通過這種方式，我看這個問題，我必須寫完整的AJAX的刪除部分的兩倍。

理論上它聽起來很容易，激活刪除按鈕的點擊事件，點擊它後，AJAX刪除部分將被調用。

但在實踐中，我發現了這樣一個簡單的解決方案。

希望你們對我有一個...

非常感謝！

Answer 1

如果你想添加的動態添加的內容，您應使用此代碼Click事件：

$(document).on('click', 'yourcontent', function (event) { 
    // ... 
}); 

對於簡單td元素與類：

$(document).on('click', 'td.myclass', function (event) { 
    // ... 
}); 

Answer 2

給你額外的按鈕全局類如delete並使用事件代理on()爲所有按鈕添加一個事件，請查看示例波紋管。

JS：

$('#editTable > tbody:last').append('<tr><td><button class="delete">DELETE</button></tr><td>'); 

$('body').on('click', '.delete', function (event) { 
    //Your code here 
}); 

希望這有助於。

---

$('body').on('click', '#add', function (event) { 
 
    $('#editTable').append('<tr><td>test<td><td><button class="delete">DELETE</button></tr><td>'); 
 
}); 
 

 
$('body').on('click', '.delete', function (event) { 
 
    alert("AJAX for delete row"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add">Add row</button> 
 
<table id="editTable"> 
 
    <thead> 
 
     <th>TEST</th> 
 
     <th>Action</th> 
 
    </thead> 
 
</table>