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。