Question

举个例子：

$('.edit_button').click(function() {
alert('test');
});

现在我的HTML：

<div id='area1'><div class='edit_button'></div></div>
<div id='area2'><div class='edit_button'></div></div>
<div id='area3'><div class='edit_button'></div></div>

区域div在可排序的div中，我根据需要动态地添加和减少或移动区域，但是当我这样做时，点击功能会中断。我相信这是因为jquery点击处理程序只对函数调用时存在于DOM中的内容起作用。

我的第一个解决方案是每次移动或删除元素时重新应用相关的jquery，但我意识到点击事件正在堆叠，现在每次单击其中一个按钮时，警报会多次触发。

我认为重新应用的点击只会覆盖现有的点击处理程序，一切都会好的，但我正在编写越来越复杂的代码来处理这种情况，这种情况可能不对。我必须做一些从根本上说错误的事情，但我的大脑正在努力尝试全力以赴。

当您不断更改页面内容时，应用jquery点击处理程序（或其他类似悬停或其他）的正确方法是什么？

更新：事件委派似乎是关键，但此代码仍然因某些原因无效：

    $('.delete_button').on("mouseenter","img",function() { alert("DLH"); });

如果我按照下面的建议将它附加到$（文档），它是否有效，但是我无法在文档中更具体地附加它？将它附加到文档是否有性能影响？

Answer 1

您的代码中存在一些问题：

$（'edit_button'）无需为类$（'。edit_button'）

.

<div id='area1'><div class='edit_button></div></div>类edit_button没有结束'

这是一个更清洁的工作示例：http://jsfiddle.net/LpDD4/

<div id="area1"><div class="edit_button">one</div></div>
<div id="area2"><div class="edit_button">two</div></div>
<div id="area3"><div class="edit_button">three</div></div>


$(document).ready(function(){
    $('.edit_button').on('click', function() {
        alert('test '+$(this).parent('div').attr('id'));
    });
});

Answer 2

感谢Kahnh和Arun（评论，没有回答，所以我不能选择它们:(），我找到了答案。我需要查看事件委派，这意味着使用.on（'click'而不是.click （）。此外，我发现委托不适用于只有类的ID或文档本身。将这些组合在一起，我现在有办法解开我的代码，使其工作没有讨厌的黑客。谢谢你们！

动态创建的元素要么不触发jquery单击或触发太多次

2 个答案: