5

我来维护一段 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。

4

6 回答 6

6

已编辑

.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>');
});
于 2012-11-30T17:43:57.557 回答
3 
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
  });

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

我建议始终绑定到文档！

于 2013-11-21T00:05:34.387 回答
0

尝试这个：

var a = $('<a class="foo" href="#">ASD</a>');
$("body").html(a);
a.click(function() {
    alert('a');
    return false;
});
于 2012-11-30T17:54:16.023 回答
0

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

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

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

于 2012-11-30T17:44:40.557 回答
0

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

$('a.foo').on('click',function(event){
 //your code goes here
});
于 2013-05-25T15:34:20.887 回答
0

我想到了两件事：

  1. 该链接没有文本，因此您没有单击它。
  2. 你甚至没有将它附加到dom。

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

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

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

a.appendTo($("body"));
于 2012-11-30T17:41:18.583 回答