jQuery 单击不适用于动态创建的项目

Question

我有一段 jQuery 循环遍历给定 div（ #container ）中的每个元素，并在每次单击跨度时发出 javascript 警报。如果 <span> 是静态的，这就可以正常工作。

但是，如果我使用一段代码，例如：

 $(someLink).click(function(){
   $("#container").html( <new html with new spans> )
});

jQuery 代码不会触发。奇怪的是

我的问题是：是否存在我的 Click 事件不适用于动态创建的项目的原因？我想我必须在我的文档准备好或心跳脚本（每 100 毫秒触发一次）中添加一些东西来连接事件？

原文由 JustAnotherDeveloper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

做这个：

  $( '#wrapper' ).on( 'click', 'a', function () { ... });

其中 #wrapper 是一个 静态元素，您可以在其中添加动态链接。

因此，您有一个硬编码到 HTML 源代码中的包装器：

 <div id="wrapper"></div>

然后用动态内容填充它。这个想法是将事件委托给该包装器，而不是直接在动态元素上绑定处理程序。

---

顺便说一句，我推荐 Backbone.js - 它为这个过程提供了结构：

 var YourThing = Backbone.View.extend({

    // the static wrapper (the root for event delegation)
    el: $( '#wrapper' ),

    // event bindings are defined here
    events: {
        'click a': 'anchorClicked'
    },

    // your DOM event handlers
    anchorClicked: function () {
        // handle click event
    }

});

new YourThing; // initializing your thing

原文由 Šime Vidas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

来源： 这篇文章

如果您动态创建元素（使用 javascript），则此代码不起作用。因为，.click() 会将事件附加到已经存在的元素上。当您使用 javascript 动态创建元素时，它不起作用。

为此，您必须使用一些其他功能，这些功能适用于动态创建的元素。这可以通过不同的方式完成..

早些时候我们有。 live () 函数

$('selector').live('click', function()
{
//your code
});

但是 .live() 已被弃用。这可以用其他函数代替。

代表（）：

使用 delegate () 函数你可以点击动态生成的 HTML 元素。

例子：

 $(document).delegate('selector', 'click', function()
{
 //your code
});

编辑：delegate() 方法在 3.0 版中已弃用。请改用 on() 方法。

上（）：

使用 on () 函数你可以点击动态生成的 HTML 元素。

例子：

 $(document).on('click', 'selector', function()
{
// your code
});

原文由 Bharat Bhushan 发布，翻译遵循 CC BY-SA 4.0 许可协议