js函数 - 创建html元素后无效的委托

时间:2014-02-25 04:51:52

标签: javascript jquery 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。我究竟做错了什么?

1 个答案:

答案 0 :(得分:2)

尝试将on与其他重载一起使用

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

请阅读here以了解有关event delegation的更多信息。