[jQuery]新增Table Row之後，裡面的按鈕無法使用

最近碰到一個問題，當我用動態增加table row的時候，要對這個新的table row操作，發現會沒辦法，上網找，原來可以使用.on()這個函數解決

一般動態新增刪除table row如下

function add_row(){
  var myRow = '<tr>'
  +'<td>Seq.</td>'
  +'<td>Some text</td>'
  +'<td><a href="#" class="delete">刪除</a></td>';
  $("#item_table tbody tr:last").after(myRow);
}

function sub_row(){
  $('#item_table tbody tr:last').remove();
}

此時，新增後的table row，會發現沒辦法使用$(“.delete”)來操作它，必須在$(document).ready()裡面，使用.on()重新註冊事件

$("table.order-list").on("click", ".delete", function (event) {
    $(this).closest("tr").remove();
});

註：.closest()是在此物件以上找到第一個選擇指定的內容，在這裡就是this物件往上找到第一個tr的元素

參考網址：網址一、範例