j查询侦听器在 div 更新后单击不起作用

Question

我对jQuery .click（）有问题

我有一个div，里面有一个数据列表，列表中每个项目旁边都有一个按钮。按下此按钮时，会将数据添加到数据库中的行中。

<div id="appointments">
Data... - <input type='submit' class='update_confirmed_button'>
Data... - <input type='submit' class='update_confirmed_button'>
Data... - <input type='submit' class='update_confirmed_button'>
Data... - <input type='submit' class='update_confirmed_button'>
Data... - <input type='submit' class='update_confirmed_button'>
</div>

单击提交按钮时，ajax 调用会使用可供选择的新列表更新div。

这是我项目的非常大的近似值，但它涵盖了这个问题的重点。

我的问题是，一旦 ajax 用新信息更新div，提交按钮就不再挂在侦听器上（即使它是相同的 id 名称，它在加载时也不存在，所以它没有挂上）......

考虑到我必须在按下提交后更新列表，我如何确保即使在通过 ajax 更新 html 后，按钮仍然会挂接到 click（）？

Answer 1

而不是使用 .click

$('#appointments').on('click', '.update_confirmed_button', function() {
    // do stuff here;
});

也适用于新添加到 DOM 中的元素

Answer 2

即使您具有相同的元素 ID，如果您使用的是 .click() ，一旦 DOM 更新，该 click 事件将不再绑定。请改用.on('click',function(){});，以便单击事件也将绑定到动态添加的元素。