为动态创建的 html 标签添加点击功能答案

【问题标题】：Add click function to dynamically created html tags为动态创建的 html 标签添加点击功能
【发布时间】：2010-12-21 18:25:09
【问题描述】：

所以我有一个包含许多其他 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 }); 会更好。

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

在这种情况下不要使用.live()。这是jQuery's .delegate() method的完美情况，效率更高。

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

只需要处理resultContainer 内的点击以查看它们是否匹配.record，其中.live() 将需要处理页面上的每次点击。

【讨论】：

我遇到的问题是我有很多事件，而且我必须委派的容器也太大了。我不得不返回正常执行事件并找到一种不同的方法来确保事件不会被应用两次。适合大多数应用程序，但对我来说太慢了。
问题是这种方法确实将“工作”延迟到“运行时”而不是“加载时间”。因此，当我创建一些新的 html 时，我宁愿花时间将事件仅应用于尚未应用的标签，而不是花时间当用户单击以确定是否需要触发事件。

【解决方案2】：

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

为所有事件附加一个处理程序与当前匹配的元素选择器，现在和将来。

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

【讨论】：

但是这样做的成本是多少？
@kralco 一个事件附加到document。查看文档 (api.jquery.com/live) 了解更多信息。
有没有办法在这种情况下使用这个解决方案？ $(".save").button({ icons: { primary: 'ui-icon-disk' }, text: false });
@kralco 对于button()，请查看此答案：stackoverflow.com/questions/3028912/…。另外，如果你所有的记录都在resultContainer，patrick dw 是对的——使用delegate。
@patrick - 不同之处在于委托只允许将事件添加到父元素，而不是整个文档？所以像.delegate(document,'click',function... 这样的东西等同于.live('click',function...？

【解决方案3】：

从 jQuery 1.7 开始，您应该使用 on() 而不是 live() 或 delegate()。来自文档：

从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。

on() 方法应附加到静态父级或document：

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

【讨论】：

【解决方案4】：

看一下 jQuery live() 函数

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

你可以为所有的div添加一个事件监听器，不管页面的变化

【讨论】：

【解决方案5】：

试试 live() 方法。而不是：

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

试试这个：

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

【讨论】：