Javascript js函数-创建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');           
}

作者：
删除
+添加更多名称
$（函数（）{
$（'.aut_按钮'）。在（'单击'，函数（）上）{
警报（“测试”）；
});
});
函数addmore（）{
$（“作者：删除”）
.insertAfter（“#firstaut”）.delegate（“.aut_按钮”）；
}

---

如果我单击新添加的

delete

按钮，它不会发出

警报

。我做错了什么

尝试在另一个重载中使用

on

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

---

请阅读以了解有关

事件委派的更多信息

我没有单击表，为什么要在表上单击（）？您必须在静态父元素上委派单击事件。