将点击功能添加到动态创建的HTML标签

Question

我有一个包含多个div的div。这些其他的div都具有名为“record”的类。我只使用此类来选择所有这些div。

<div id = "resultContainer">
   <div class="record">result1</div>
   <div class="record">result2</div>
   <div class="record">result3</div>
   <div class="record">result4</div>
</div>

我也添加了一个点击事件=

$(".record").click(function(e) {
        do stuff here....
    });

现在我想要动态添加另一个 div。

$("#resultContainer").append("<div class='record'>result5>/div>");

但现在点击事件没有添加到记录中。

我的想法是创建一个名为update()的函数，执行$(".record....代码，并在每次添加记录时调用该函数。但是原始的div会执行多次操作！

我如何让所有的div，在它们被添加的时间不同的情况下，只在单击时执行do stuff here...一次？

谢谢！

此外，我还在动态div上放置了按钮。因此，能够处理像这样的解决方案：$(".save").button({ icons: { primary: 'ui-icon-disk' }, text: false });将是更可取的。

- kralco626

Answer 1

在这种情况下不要使用.live()。这是jQuery的.delegate()方法的完美使用场景，该方法更为高效。

$("#resultContainer").delegate('.record','click',function() {
    // do stuff here...
});

只有在resultContainer内部的点击需要被处理以查看它们是否匹配.record，而.live()则需要处理页面上的每次点击。

- user113716

---

我遇到的问题是，我有很多事件，而我必须委托的容器太大了。我不得不回到正常实现事件，并找到一种不重复应用事件的不同方法。对于大多数应用程序来说很好，但对我来说太慢了。 - kralco626

问题在于这种方法将“工作”延迟到“运行时”而不是“加载时”。因此，当我创建一些新的HTML时，我宁愿花时间仅将事件应用于尚未应用的标记，而不是在用户单击时花费时间来确定是否需要触发事件。 - kralco626

Answer 2

http://api.jquery.com/live/:

将一个事件处理程序附加到所有符合当前选择器的元素，现在和未来。

$(".record").live("click", function(e) {
    //do stuff here... 
});

- Emmett

---

@kralco 一个事件被附加到了 document。查看文档（http://api.jquery.com/live/）获取更多信息。 - Emmett

有没有办法在这种情况下使用这个解决方案？$（".save"）.button（{icons：{primary：'ui-icon-disk'}，text：false}）; - kralco626

@kralco 对于 button()，请查看这个答案：https://dev59.com/WnA75IYBdhLWcg3w7tx6#3028958。此外，如果您的所有记录都在 resultContainer 中，patrick dw 是正确的 - 使用 delegate。 - Emmett

@patrick - 不同之处在于delegate允许将事件添加到父元素，而不是整个文档？ 因此，类似.delegate(document,'click',function...的内容将等同于.live('click',function...？ - kralco626

@kralco 不行。你得选择那个答案中的一个解决方案，比如使用livequery插件。 - Emmett

Answer 3

自 jQuery 1.7 版本开始，应该使用 on() 方法来替代 live() 或者 delegate() 方法。根据文档说明：

自 jQuery 1.7 版本开始，.on() 方法提供了所有必需的事件处理功能。

on() 方法应该绑定到静态父元素或者 document 上：

$(document).on( 'click', '.record', function(e) {
    // do stuff here....
});

- JJJ

Answer 4

看一下jQuery的live()函数

http://api.jquery.com/live/

您可以为所有的 div 添加事件监听器，而不管页面上的变化。

- qwertymk

Answer 5

尝试使用live()方法。而不是：

$(".record").click(function(e) {
    do stuff here....
});

试试这个：

$(".record").live(function(e) {
    do stuff here....
});

- jLuengas