我有一段 jQuery 循环遍历给定 div(#container) 中的每个元素，并在每次单击跨度时发出 javascript 警报。如果<span> 是静态的，这将正常工作。
但是，如果我使用如下代码：
$(someLink).click(function(){
$("#container").html( <new html with new spans> )
});
jQuery 代码不会触发。不过很奇怪
我的问题是：我的 Click 事件对动态创建的项目不起作用是否有原因？我想我必须在我的文档准备好或心跳脚本（每 100 毫秒触发一次）中添加一些东西来连接事件？？
【问题讨论】：
标签： javascript jquery html
在 1.7.1 中使用新的 jQuery on 函数 -
【讨论】：
使用.click 只会将事件附加到已经存在的元素。
您需要使用一个函数来监视动态创建的事件 - 在旧版本的 JQuery 中这是 .live()，但它已被 .on() 取代
【讨论】：
这样做：
$( '#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
【讨论】：
.live 和.delegate 已被.on 取代。 .on 方法为绑定事件提供了 all 功能，不再需要其他方法。
.on 统一了 .bind、.live 和 .delegate。统一可以实现更简单、更简洁的代码。
$("#container").delegate("span", "click", function (){
alert(11);
});
【讨论】：
试试类似的东西
$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });
您基本上需要从 DOM 的非动态部分附加事件，以便它可以监视动态创建的元素。
【讨论】：
来源：this post
如果您是动态创建元素（使用 javascript），则此代码不起作用。 因为， .click() 会将事件附加到已经存在的元素上。当您使用 javascript 动态创建元素时，它不起作用。
为此，您必须使用其他一些适用于动态创建元素的函数。这可以通过不同的方式完成..
之前我们有 .live() 函数
$('selector').live('click', function()
{
//your code
});
但 .live() 已弃用。这可以用其他函数替换。
委托()：
使用 delegate() 函数可以点击动态生成的 HTML 元素。
例子：
$(document).delegate('selector', 'click', function()
{
//your code
});
编辑：delegate() 方法在 3.0 版中已弃用。请改用 on() 方法。
ON()：
使用 on() 函数可以点击动态生成的 HTML 元素。
例子：
$(document).on('click', 'selector', function()
{
// your code
});
【讨论】：
on() 和delegate() 之间的区别吗？
几天前我遇到了这个问题 - 我的解决方案是使用 .bind() 将所需的函数绑定到动态创建的链接。
var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>');
catLink.bind("click", function(){
$.categories.getSubCategories(this);
});
getSubCategories : function(obj) {
//do something
}
我希望这会有所帮助。
【讨论】：
您必须将点击事件添加到现有元素。 您不能将事件添加到动态创建的 dom 元素。 如果您想向它们添加事件，您应该使用“.on”将事件绑定到现有元素。
$('p').on('click','selector_you_dynamic_created',function(){...});
.delegate 也应该可以工作。
【讨论】：
selector_you_dynamic_created 到底是什么，它是一个类还是一个 id？