javascript - 将事件绑定(bind)到多个追加数据

Question

我正在使用 jQuery 将一些数据发布到 PHP 脚本，该脚本处理这些数据，然后附加回显的数据。现在，数据回显中还有一些 jQuery 脚本，只要您不向脚本发送两个数据实例，一切都可以正常工作。

说明:想象一下，我已将一些文本(假设为 A)发布到处理 PHP 脚本，然后该脚本将数据插入数据库并回显数据以及删除按钮；现在删除按钮工作正常(它删除和所有..)，但如果我将另一段文本(比方说B)发布到处理器(无需在发布之间重新加载页面)并与删除按钮一起回显数据，仅第一个被删除，但第二个没有被删除。

代码表示

在不重新加载页面的情况下发布两个文本字符串(text1 和 text2)，然后附加一个 div；它们每个都有删除按钮和文本，但单击事件仅附加到第一个删除按钮，无论我单击第二个删除按钮多少次，它都不会执行任何操作。

<div class="a">text1<div class="delete">X</div></div> // this one gets the click event 
<div class="b">text2<div class="delete">X</div></div> // this one doesn't

下面是使用的脚本(简化)

<script>
$(document).ready(function () { 
    $(".delete").click(function () {
         $(this).hide();
    });
});
</script>

注意:由于您在没有重新加载页面的情况下两次发布某些文本，因此上面的 JavaScript 会回显两次；重新加载页面时问题消失。

<小时/>

如需更多说明，请发表评论

Answer 1

由于您要动态创建元素，因此必须使用 .on() 来使用事件委托(delegate)

$(document).on('click','.delete',function() {
    $(this).hide()
});

此外，如果将 document 替换为 .delete 的静态父选择器，性能会更好