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

Question

我有一段jQuery，它会循环遍历给定div（#container）中的每个元素，并且每次单击范围时都会发出JavaScript警报。如果<span>的值是静态的，则效果很好。

但是，如果我使用如下代码：

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

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

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

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