Question

我来维护一段从服务器下载一些JSON数据的javascript，构建一个新的表行（如$('<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 。

Answer 1

<强> EDITED

应该像这样设置.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>');
});

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

绑定到元素时，该函数将绑定到所有以前存在的元素 ONLY 。因此，请确保在文档加载结束时或函数结束时执行此操作。

我建议始终绑定到文档！

Answer 3

我想到了两件事：

该链接没有文字，因此您不会点击它。
你甚至没有将它附加到dom。

Here有一个小提琴可以使用与你的代码非常相似的代码。

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

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

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

Answer 4

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

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

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

Answer 5

试试这个：

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

Answer 6

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

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

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

6 个答案: