div更新后点击不能正常工作的jQuery监听器

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更新，该点击事件将不再被绑定。而是使用.on('click',function(){});，以便将click事件绑定到动态添加的元素。