我使用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
的静态父选择器,则性能会更好