js函數 - 創建委託不工作

Question

HTML元素後，我有這樣的：

<table> 
    <tr id="firstaut"> 
     <td>Author:</td> 
     <td> 
      <input class="auts" name="name" /> 
     </td> 
     <td> 
      <button class="aut_button" type="button">delete</button> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <a onclick="addmore()"> + add more name</a> 
     </td> 
    </tr> 
</table> 


$(function(){ 
    $('.aut_button').on('click',function(){ 
    alert('test'); 
    }); 
}); 
function addmore(){ 
    $("<tr id='firstaut'><td>Author:</td><td><input class='auts' name='name'/></td><td><button class='aut_button' type='button'>delete</button></td></tr>") 
      .insertAfter('#firstaut').delegate('.aut_button');   
} 

如果我點擊新增delete按鈕，它不是alerting。我究竟做錯了什麼？

Answer 1

嘗試使用on與其他重載，

$(function(){ 
    $('table').on('click', '.aut_button' ,function(){ 
    alert('test'); 
    }); 
}); 

請仔細閱讀here更多地瞭解event delegation。