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

我想将onclick事件绑定到用jquery动态插入的元素

但它从不运行绑定函数。如果您能指出这个示例为什么不起作用，以及如何使它正常运行，我将非常高兴：

/p>

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

test of click binding

jQuery(function(){

close_link = $('Click here to see an alert');

close_link.bind("click", function(){

alert('hello from binded function call');

//do stuff here...

});

$('.add_to_this').append(close_link);

});

Test of click binding

problem: to bind a click event to an element I append via JQuery.

The link is created, then added here below:

Another is added here below:

编辑：我编辑了这个示例以包含插入方法的两个元素。在这种情况下，不会执行alert()调用。(感谢@daff在评论中指出这一点)

当我在FF 3.5中测试时，您的示例页运行良好

@很不幸你是对的！然后我显然提取了我的代码中实际工作的部分。谢谢你指出这一点！

@daff，我编辑了这个示例，使它包含两个插入方法的位置。然后它真的停止工作了：)

以下是关于动态添加元素的单击事件的有用文章codepedia.info//02/click-event-for-dynamic-button-jquery

所有这些方法都已弃用。您应该使用on方法来解决您的问题。

如果要以动态添加的元素为目标，则必须使用

$(document).on('click', selector-to-your-element , function() {

//code here ....

});

这将替换已弃用的.live()方法。

*selector-to-your-element*应为'.some-class'或'#some-id'。

我的问题是我做的是像$('.row').on('click', function(){...});而不是$(document).on('click','.row',function(){...});这样的事情。

记住，$(document)可以是页面上任何不变的元素。这可以防止过多的事件冒泡，加速JS。如$(document)->$('.example-container')。

详细说明-/questions/203198/&hellip；

第一个问题是，当使用多个元素对jquery集调用append时，将为每个元素创建要附加的元素的克隆，从而丢失附加的事件观察者。

另一种方法是为每个元素创建链接：

function handler() { alert('hello'); }

$('.add_to_this').append(function() {

return $('Click here').click(handler);

})

另一个潜在的问题可能是，事件观察者在元素被添加到DOM之前被附加。我不确定这是否有什么要说的，但我认为这种行为可能被认为是不确定的。更可靠的方法可能是：

function handler() { alert('hello'); }

$('.add_to_this').each(function() {

var link = $('Click here');

$(this).append(link);

link.click(handler);

});

当您必须绑定附加了其他函数的元素上的单击时会出现问题。这就是为什么我建议使用am1ne答案。

实际上，当您针对由其他代码创建的已知标记结构时。但是在这里，他自己插入元素，并且没有明确的元素选择器(它只是一个锚，可能有很多锚)，所以他必须添加额外的标记才能针对元素。在这种情况下，直接将处理程序附加到元素也很容易，而不是捕获所有单击并测试选择器匹配。

我理解你的回答，不是说是错的。当然，如果能够动态地注入一些HTML(比如加载了无限滚动内容的Ajax的ul li图片)，并且已经将按钮绑定到某些动作(比如lightbox)，那就更舒服了。

对于默认情况下可以使用旧版本jquery的情况(例如Drupal7)，这个答案也非常有用。jquery 1.7中引入了on()。

实况转播怎么样？

$('.add_to_this a').live('click', function() {

alert('hello from binded function call');

});

不过，你所做的看起来应该是可行的。还有一个帖子看起来很相似。

你说得对，它确实起作用了。我的错误。所以我编辑了这个问题。

是的，这类问题正是现场活动要解决的问题。

这个问题与活动无关，尽管在这种情况下，活动可以解决这个问题。DAFF提供的答案也解决了这个问题，并且在不向方程式中添加新的活动概念的情况下解决了这个问题。

我还可以补充说，目前，这是绑定事件的实际方法。所以今天，我也会用live()来支持bind()。

现在不赞成使用live()，而赞成使用on()链接。

在jquery 1.9中，live()被否决并替换为on()。

派对稍微晚了一点，但我想我会尝试清除jquery事件处理程序中的一些常见误解。从jquery 1.7开始，应该使用.on()而不是不推荐使用的.live()，将事件处理程序委托给在分配事件处理程序后的任意点动态创建的元素。

也就是说，切换on的live并不是简单的，因为语法略有不同：

新方法(示例1)：

$(document).on('click', '#someting', function(){

});

不推荐使用的方法(示例2)：

$('#something').live(function(){

});

如上图所示，两者之间存在差异。通过将选择器传递给jquery函数本身，实际上可以调用与.live()类似的twist:.on()：

例3：

$('#something').on('click', function(){

});

但是，如果不象例1那样使用$(document)，例3将不适用于动态创建的元素。如果您不需要动态委托，那么示例3就完全可以了。

Should $(document).on() be used for everything?

它可以工作，但是如果您不需要动态委托，那么使用示例3更合适，因为示例1需要从浏览器进行稍微多的工作。不会对性能产生任何实际影响，但使用最合适的方法是有意义的。

Should .on() be used instead of .click() if no dynamic delegation is needed?

不一定。以下只是一个快捷方式，例如3：

$('#something').click(function(){

});

上述方法是完全有效的，因此，在不需要动态委托的情况下，使用哪种方法确实是个人偏好的问题。

参考文献：

j.on()查询单

j.click()查询单

j.live()查询单

考虑一下：

jQuery(function(){

var close_link = $('Click here to see an alert');

$('.add_to_this').append(close_link);

$('.add_to_this').children().each(function()

{

$(this).click(function() {

alert('hello from binded function call');

//do stuff here...

});

});

});

它将工作，因为您将它附加到每个特定的元素上。这就是为什么在将链接添加到DOM之后，您需要找到一种方法来显式地选择添加的元素作为DOM中的jquery元素，并将click事件绑定到它。

正如建议的那样，最好的方法可能是通过live方法将它绑定到特定的类。

谢谢你的回答，达夫。我只能向dom中的元素添加事件侦听器，这是不可能的。但是，现在我将更改代码来完成这项工作。(应该没问题，因为我只是为添加的链接添加了特殊的CSS类)。

是的，你是对的，这不是DOM(它实际上只适用于一个)，对不起。但我也发现，绑定到动态创建的元素似乎非常烦人，只要它们不能被不同的jquery选择器选择。

"来自绑定函数调用的你好。"抱歉，这篇文章(整页；问答)上的内容太多了，我只想帮你，你知道的，把它弄清楚。

function load_tpl(selected=""){

$("#load_tpl").empty();

for(x in ds_tpl){

$("#load_tpl").append('

'+ds_tpl[x]+'

');

}

$.each($("#load_tpl a"),function(){

$(this).on("click",function(e){

alert(e.target.id);

});

});

}

有时可能需要与元素一起创建click事件。例如，当基于选择器的绑定不是选项时。关键部分是通过在单个元素上使用.replaceWith()，避免Tobias所讨论的问题。请注意，这只是一个概念证明。

// This simulates the object to handle

var staticObj = [

{ ID: '1', Name: 'Foo' },

{ ID: '2', Name: 'Foo' },

{ ID: '3', Name: 'Foo' }

];

staticObj[1].children = [

{ ID: 'a', Name: 'Bar' },

{ ID: 'b', Name: 'Bar' },

{ ID: 'c', Name: 'Bar' }

];

staticObj[1].children[1].children = [

{ ID: 'x', Name: 'Baz' },

{ ID: 'y', Name: 'Baz' }

];

// This is the object-to-html-element function handler with recursion

var handleItem = function( item ) {

var ul, li = $("

" + item.ID +"" + item.Name +"

");

if(typeof item.children !== 'undefined') {

ul = $("

for (var i = 0; i < item.children.length; i++) {

ul.append(handleItem(item.children[i]));

}

li.append(ul);

}

// This click handler actually does work

li.click(function(e) {

alert(item.Name);

e.stopPropagation();

});

return li;

};

// Wait for the dom instead of an ajax call or whatever

$(function() {

var ul = $("

for (var i = 0; i < staticObj.length; i++) {

ul.append(handleItem(staticObj[i]));

}

// Here; this works.

$('#something').replaceWith(ul);

});

Magical ponies ?

我相信这样做的好方法：

$('#id').append('...');

$('#subid').click( close_link );

我不能使用id添加到元素，因为我想为许多元素执行此操作。请参见更新后的代码示例：)

$(document).ready(function(){

$(document).on('click', '.close', function(){

var rowid='row'+this.id;

var sl = '#tblData tr[id='+rowid+']';

console.log(sl);

$(sl).remove();

});

$("#addrow").click(function(){

var row='';

for(var i=0;i<10;i++){

row=i;

row='

'

+ '

'+i+''

+ '

ID'+i+''

+ '

NAME'+i+''

+ '

'

+'

';

console.log(row);

$('#tblData tr:last').after(row);

}

});

});

SrIDNameDelete