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

Question

我来维护一段 JavaScript，它从服务器下载一些 JSON 数据，构建一个新的表行(如 $('<tr></tr') )并将其插入到文档中。

a节点在某一时刻是这样创建的:

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

之后，事件将像这样绑定(bind)到它:

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

  return false;
});

唯一的问题是这似乎不起作用。通过 on() 进行绑定(bind)也不行或已弃用的 live() 。该处理程序只是被“忽略”，永远不会触发，并且页面滚动到顶部(由于 href="#" )。绑定(bind)事件时，元素已经是 append编辑为 DOM。任何帮助将不胜感激。

我想到了一些上下文信息:该元素是在迭代数据的循环内创建的，但这应该不是问题，除非 javascript 在范围界定方面发生了一些真正奇怪的事情，加上其他一切我尝试使用元素工作:我可以更改其内容、样式，只有事件绑定(bind)不起作用。当然还有 jQuery 版本，即 1.8.3。

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>');
});