jquery onclick无效

Question

我正在动态创建一个链接，我正在尝试添加一个单击功能。正在添加链接，但是单击功能不起作用。我在控制台里看不到任何东西，也没有收到警报。

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Answer 1

jQuery最常见的错误之一。当动态添加元素时，普通的jQuery事件处理程序不起作用，因此您需要使用.live()将事件绑定到动态元素。这应该有效：

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .live("click", function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

注意在那里使用.live("click", function() { ... });？这应该可以解决你的问题。

Answer 2

看起来没问题。您可以尝试使用each（）迭代该集合。我不确定你是否可以将处理程序绑定到这样的jQuery集合。

section.find('a.link').each(function(){
    $(this).attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });


});

Answer 3

如果在IE中运行此命令，请确保存在开发人员工具（ F12 ），否则控制台将未定义，并且console.log()的调用将强制发生错误并停止该函数执行。

还有什么：outerHTML只是IE浏览器，你最好忘记它，永远不要使用它。

Answer 4

您无需手动加入HTML。

您将事件绑定到一个元素，然后获取该元素的HTML并将其连接成一个字符串，然后在append到#posts时将其作为新元素插入到DOM中

items在这里没有定义，但是我会假装它是一个生成的<section>等数组？

如果是这种情况，我可能会遗漏你在这里尝试做的事情，但似乎你可以消除整个HTML的连接并简单地追加items数组，这将保留绑定的点击事件。

// Push the element, don't stringify it.
items.push(section);

// Then simply append the "items" elements.
$('#posts').empty().append(items);

当然，live也可能解决问题，但您当然可以将事件绑定到生成的元素，然后将它们插入到DOM中。你不能做的是将一个事件绑定到一个元素然后打印出它的HTML并将其插入到DOM中。您对原始元素所做的任何绑定都将丢失。