Question

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

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

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

jQuery代码没有启动。奇怪的是，

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

来源：this post

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

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

之前我们有。直播（）函数

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

但不推荐.live（）。这可以被其他函数替换。

<强>代表（）：

使用委托（）函数，您可以单击动态生成的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

$("#container").delegate("span", "click", function (){
    alert(11);
});

Answer 5

使用.click只会将事件附加到已存在的元素。

您需要使用一个监视动态创建事件的函数 - 在旧版本的JQuery中，这是.live()，但这已被.on()取代

Answer 6

我几天前遇到过这个问题 - 我的解决方案是使用.bind（）将所需的函数绑定到动态创建的链接。

var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>');
catLink.bind("click", function(){
 $.categories.getSubCategories(this);
});

getSubCategories : function(obj) {
 //do something
}

我希望这会有所帮助。

Answer 7

您必须将click事件添加到现有元素。您无法将事件添加到动态创建的dom元素中。我想向他们添加事件，你应该使用“.on”将事件绑定到现有元素。

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

.delegate也应该有效。

Answer 8

在1.7.1中使用新的jQuery函数 -

http://api.jquery.com/on/

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

8 个答案: