jQuery點擊流上的事件以添加/刪除表中的行

Question

我使用jQuery動態添加新的行到我的表中，另一方面我有一個函數可以刪除按鈕單擊上的行。如果我在添加後嘗試刪除，則動態添加行的問題無法刪除。

//adding new row to table 
    $('button#addRow.btn').click(function(e) { 
      e.preventDefault(); 
      var rowCount = $('#feeds tr').length; 
      $('#feeds > tbody:last').append(//here comes tr html)}; 

//removing rows from table 

    $("tr td .delete").on("click", function(e) { 
     e.preventDefault(); 
     $(this).closest("tr").remove() 
    }); 

Answer 1

由於該錶行動態添加，你需要使用event delegation註冊事件處理程序

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$('#feeds').on('click', '.delete', function(event) { 
    event.preventDefault(); 
    $(this).closest("tr").remove(); 
}); 

這將#feeds元素中的事件附加到任何.delete按鈕， 減少範圍必須檢查整個document元素樹並提高效率。

參考文獻：

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/

Answer 2

嘗試使用這樣的事情在你的TR HTML：

<tr> 
    // whatever ... 

    <td> 
     <input type="button" onclick="$(this).parent().parent().remove();" value="Delete" /> 
    </td> 
</tr> 

該按鈕將刪除其所屬的行至。