Question

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

说明：想象一下，我已经发布了一些文本（让我们说A）到处理PHP脚本，然后将数据插入数据库并回显数据和删除按钮;现在删除按钮工作正常（它删除和所有..）但如果我发布另一段文本（比方说B）到处理器（没有在帖子之间重新加载页面）和回显数据以及删除按钮，只第一个被删除但第二个没有。

代码表示

发布两个文本字符串（text1＆amp; 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

的静态父选择器，效果会更好

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

1 个答案: