关于javascript：jQuery点击不适用于动态创建的项目


jQuery click not working for dynamically created items

本问题已经有最佳答案，请猛点这里访问。

我有一段jquery，它在给定的DIV(#container)中循环遍历每个元素，并在每次单击一个跨度时发出一个javascript警报。如果是静态的，这就可以正常工作。

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

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

jquery代码不会触发。但奇怪的是

我的问题是：对于动态创建的项目，是否存在我的单击事件不起作用的原因？我想我必须在我的文档就绪或心跳脚本(每100毫秒触发一次)中添加一些东西来连接事件？？

这样做：

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

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

所以，您有一个包装器，它是硬编码到HTML源代码中的：

1
 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
相关讨论

来源：本文

如果您动态地创建了元素(使用javascript)，那么这个代码就不起作用。因为，.click()会将事件附加到已经存在的元素上。当您使用javascript动态创建元素时，它不起作用。

为此，您必须使用其他一些在动态创建的元素上工作的函数。这可以通过不同的方式实现。

之前我们有.live()函数

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

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

委托()：

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

例子：

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

()：

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

例子：

1
2
3
4
$(document).on('click', 'selector', function()
{
// your code
});
相关讨论

尝试一下

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

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

1
2
3
$("#container").delegate("span","click", function (){
    alert(11);
});
相关讨论

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

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

必须将Click事件添加到现有元素中。不能将事件添加到动态创建的DOM元素中。如果要向它们添加事件，则应使用".on"将事件绑定到现有元素。

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

.学员也应该工作。

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

1
2
3
4
5
6
7
8
var catLink = $('' + category.category + '');
catLink.bind("click", function(){
 $.categories.getSubCategories(this);
});

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

我希望这有帮助。

使用1.7.1中的新jquery on函数-

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