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

Question

我有一个jQuery循环遍历给定div(#container)中的每个元素,并在每次单击span时执行javascript警报.如果它<span>是静态的,这样可以正常工作.

但是,如果我使用一段代码,如:

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

jQuery代码没有启动.但奇怪的是

我的问题是:我的Click事件不适用于动态创建的项目吗？我假设我必须在我的文档就绪或heartbeat-script(每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

Answer 2

来源:这篇文章

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

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

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

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

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

代表():

使用delegate()函数,您可以单击动态生成的HTML元素.

例:

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

上():

使用on()函数,您可以单击动态生成的HTML元素.

例:

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

Answer 3

尝试类似的东西

$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });

您基本上需要从DOM的非动态部分附加事件,以便它可以监视动态创建的元素.

Answer 4

您必须将单击事件添加到现有元素。您不能向动态创建的 dom 元素添加事件。如果您想向它们添加事件，您应该使用“.on”将事件绑定到现有元素。

$('p').on('click','selector_you_dynamic_created',function(){...});

.delegate 也应该工作。