jQuery -不能将事件绑定到动态元素?

I've come to maintain a piece of javascript that downloads some JSON data from the server, builds a new table row (like $('<tr></tr')) and inserts it into the document.

我来维护一个从服务器下载一些JSON数据的javascript片段，构建一个新的表行(比如$('

The a node is, at one point created like this:

一个节点是这样创建的:

var a = $('<a class="foo" href="#"></a>');

and later, an event is bound to it like this:

后来，一个事件就像这样绑定在它上面:

a.click(function () {
  // yadda yadda

  return false;
});

The only problem is that this doesn't seem to work. Neither does binding through on() or the deprecated live(). The handler is simply "ignored", never fires and the page scrolls to the top (due to the href="#"). When binding the event, the element is already appended to DOM. Any help would be greatly appreciated.

唯一的问题是这似乎行不通。没有绑定()或不支持的live()。处理程序只是“被忽略”，从不触发，页面滚动到顶部(由于href="#")。绑定事件时，元素已经附加到DOM。如有任何帮助，我们将不胜感激。

Some contextual information that comes to mind: the element is created inside a loop iterating over the data, but that shouldn't be a problem unless javascript has some really weird stuff going on with scoping, plus everything else I try with the element works: I can change its content, styling, only the event binding doesn't work. And of course, the jQuery version, which is 1.8.3.

一些上下文信息,脑海里:“里面的元素创建一个循环遍历数据,但那不应该是一个问题,除非javascript范围发生了一些很奇怪的东西,再加上我尝试一切元素的作品:我可以改变它的内容、样式,只有事件绑定是行不通的。当然，jQuery版本是1。8.3。

6 个解决方案

#1

EDITED

编辑

The .on() should be set up like this to work with dynamically created elements. Also, make sure to use Jquery version 1.8 (newest release)

应该像这样设置.on()以使用动态创建的元素。另外，请确保使用Jquery 1.8版本(最新版本)

Also, you need to prevent the standard action of the click if you don't want to scroll to the top.

此外，如果不希望滚动到顶部，则需要防止单击的标准操作。

Here is a working FIDDLE

这是一个工作小提琴

var a = $('<a class="foo" href="#">ASD</a>');

a.appendTo($("body"));

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).after('<br/><a class="foo" href="#">ASD</a>');
});

#2

You have various options. You can bind to the element or to the document.

BIND TO DOCUMENT:

结合文档:

 $(document).on("click", "a.foo", function(event){
//do stuff here 
 });

When you bind to a document, you can freely create and destroy a.foo elements and they will all respond to your function.

当您绑定到一个文档时，您可以*地创建和销毁一个文档。foo元素，它们都会对函数做出响应。

BIND TO ELEMENT:

绑定到元素:

$("a.foo").on("click", function(event){
//do stuff here
  });

When you bind to an element, the function is bound to all previously existing elements ONLY. So make sure you do this at the end of document load or at the end of your function.

当您绑定到一个元素时，该函数只绑定到所有先前存在的元素。所以一定要在加载文档的末尾或者函数的末尾进行。

I would recommend always binding to document!

我建议始终绑定到文档!

#3

Two things come to my mind:

我想到了两件事:

The link has no text so you are not clicking it.
该链接没有文本，所以您没有点击它。
You aren't even appending it to the dom.
您甚至没有将它附加到dom。

Here there is a fiddle that works with code very similar to yours.

这里有一个与您的代码非常相似的小提琴。

var a = $('<a class="foo" href="#">ASD</a>');

a.click(function() {
    alert('a');
});

a.appendTo($("body"));

#4

You can use event delegation like so.

您可以像这样使用事件委托。

$('body').on('click','.foo',function(){
    alert('foo');
});

This will allow you to set the event handler before the element is present.

这将允许您在元素出现之前设置事件处理程序。

#5

Try this:

试试这个:

var a = $('<a class="foo" href="#">ASD</a>');
$("body").html(a);
a.click(function() {
    alert('a');
    return false;
});

#6

Try binding the function within the scope of the function where you dynamically create the element.

尝试在动态创建元素的函数范围内绑定函数。

$('a.foo').on('click',function(event){
 //your code goes here
});

#1