jQuery - 无法将事件绑定到动态元素？

Question

我需要维护一段JavaScript代码，它从服务器下载一些JSON数据，构建一个新的表格行（像$('<tr></tr')），并将其插入文档中。

a节点在某个时候是这样创建的：

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

然后，可以像这样将事件绑定到它上面：

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

  return false;
});

唯一的问题是这似乎不起作用。通过on()或已废弃的live()进行绑定也不起作用。处理程序被“忽略”，从未触发，页面会滚动到顶部（由于href="#"）。在绑定事件时，元素已经被append到DOM中。非常感谢您提供任何帮助。

有一些上下文信息浮现在脑海中：该元素是在迭代数据的循环内创建的，但这不应该是问题，除非javascript在作用域方面有一些非常奇怪的问题，此外，我尝试使用该元素的所有其他操作都可以：我可以更改其内容、样式，只有事件绑定不起作用。当然，jQuery版本是1.8.3。

- Jakub Lédl

---

需要更多上下文才能确定。你的代码似乎没有错。 - Diego

你是否正确使用了on()函数？ - VIDesignz

@JakubLédl 绑定点击事件到新创建的元素的方式不对。请查看我的修订答案和示例。 - VIDesignz

你能举个例子说明它如何“上下文敏感”吗？ - VIDesignz

此外，点击事件中的函数是否应该影响另一个动态生成的元素？请详细说明您的问题。 - VIDesignz

Answer 1

已编辑

如果要处理动态创建的元素，应该像这样设置 .on()。同时，请确保使用 jQuery 的最新版本 1.8。

另外，如果您不想滚动到顶部，请防止点击事件的默认行为。

这里有一个可以正常工作的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>');
});

- VIDesignz

---

在这个例子中，事件被绑定到动态生成的元素上，而不是一开始就绑定到文档上，因此使用常规绑定应该没问题：$('a').on('click', function(){ - Diego

我不确定是否是这种情况...希望原帖作者能够详细说明。无论如何，训练自己以正确的方式绑定事件是没有坏处的！ - VIDesignz

我尝试使用on()更多是出于绝望，我想常规绑定应该可以工作，但还是谢谢。 - Jakub Lédl

@JakubLédl 没有理由它不能这样工作...你的脚本中肯定有其他问题。 - VIDesignz

Answer 2

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

绑定文档：

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

当您绑定文档时，您可以自由地创建和销毁 a.foo 元素，并且它们都会响应您的函数。

绑定元素：

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

当您绑定到一个元素时，该函数仅绑定到所有先前存在的元素。因此，请确保在文档加载结束或函数结束时执行此操作。

我建议始终绑定到文档！

- Federico

Answer 3

我想到了两件事：

1. 链接没有文本，所以你不能点击它。
2. 你甚至没有将它附加到 DOM 中。

这里有一个很相似的代码片段可以使用。

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

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

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

- Diego

---

谢谢您的建议，但是1）在单击链接后页面会滚动到顶部，2）我已经多次检查，不幸的是，我非常确定我做了。 - Jakub Lédl

@JakubLédl，它会滚动到顶部，因为你在href中有“#”。你以为它会做什么？ - VIDesignz

当然可以。我加了这个是为了看它是否确实“做了什么”。当然，点击回调包含event.preventDefault()（或者 return false，因为回调函数首先不被调用，所以无关紧要）。 - Jakub Lédl

@JakubLédl 绑定点击事件是有效的，只是点击事件内部的函数不起作用吗？ - VIDesignz

Answer 4

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

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

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

- bluetoft

---

在这个例子中，事件被绑定到动态生成的元素上，而不是一开始就绑定到文档上，因此使用常规绑定应该没问题：$('a').on('click', function(){ - Diego

不幸的是，我需要将回调函数绑定到每个链接上，因为回调函数取决于创建它的循环内部的变量。但我认为这没关系，因为每次迭代都会创建（并附加）一个新链接。 - Jakub Lédl

Answer 5

试试这个：

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

- palaѕн

Answer 6

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

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

- Federico