将事件绑定到多个附加数据

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() 的事件委托

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

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