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


Bind events to mutliple appended data

我使用jQuery将一些数据发布到PHP脚本中,该脚本处理这些数据,然后附加回显的数据。现在,在返回的数据中还有一些jQuery脚本,只要不向脚本发送两个数据实例,一切都很好。

解释:想象一下,我在处理PHP脚本中发布了一些文本(比如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会被重复两次;重新加载页面时问题消失。


如需更多澄清,请留下评论

由于是动态创建元素,因此必须使用.on() 使用事件委派

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

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