小编典典

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

javascript

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

但是,如果我使用如下代码:

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

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

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


阅读 381

收藏
2020-04-25

共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
2020-04-25