javascript - 使用 jquery 更新页面会使 javascript 函数无用？

Question

我有这个页面，用户在其中选择一个项目，一个 php 文件将返回一个表格，每个单元格上都有几个按钮，但是当我点击它时，不会调用 js 函数。

这是js函数

$('#deleteRow').on('click',function(evt)
{
    console.log('triggered');

}
);

这是 php 回显

echo "
<tr>
  <td>$name</td>
  <td>$startData  $startTime</td>
  <td>$endDate $endTime</td>
  <td id='action-buttons'><button type='button' class='btn btn-primary pull-right'  id='deleteRow' ><i class='glyphicon glyphicon-trash'></i> </button></td>
  <td id='action-buttons'><button class='btn btn-primary pull-right' data-toggle='modal' data-target='#myModal'><i class='glyphicon glyphicon-edit'></i> </button></td>
   <td><label id='1'><input id='check' type='checkbox' name='switch' class='checkbox' $activeBool /><div class='switch' ></div></label></td>
</tr>


";

这就是我将它放在页面上的方式(这是 ajax post 的成功函数)

 success: function(result){
               $('#content-table tbody').html(result);

             }
             });

我不知道为什么会这样。

Answer 1

您正在为尚不存在的对象注册 click 事件。

试试这个:

$(document.body).on('click','#deleteRow',function(evt)
{
    console.log('triggered');
});

更新:

正如 ratiorick 提到的，如果您有一个相同的 id 名称并且您想要获得您实际点击的那个的句柄，您可以这样做:

$(document.body).on('click','button[id^=delete]',function(evt)
{
    console.log('triggered');
});

'button[id^=delete]' 基本上表示每个 id 星号为 delete 的按钮。