DOM加载后的jQuery访问元素

Question

我已经通过innerHTML加载了一些内容。

$('#load-text-button').click(function() { 
     document.getElementById("text-area").innerHTML="Some text <span class="footnote">The Footnote</span> Some other text. 
    }); 

现在我想访问新创建的跨度（一类“脚注”的）被点击了“粗体脚注按钮”的时候。脚注按钮在文档加载时加载，但文本在DOM加载后加载。

$('#bold-footnote-button').click(function() { 
     $(".footnote").addClass('bold'); 
    }); 

无法找到“.footnote”元素。我读过的所有内容都指向使用.live方法，但文档声称它现在已被弃用。如何直接访问新的“.footnote”元素而不必直接点击它？

Answer 1

点击功能应该可以正常工作，因为您不是针对新插入的元素与事件处理程序，而是在事件处理程序中。该问题可能是，没有这样的元素插入你有与引用的一些问题，做它像这样：

$('#load-text-button').click(function() { 
    $("#text-area").html('Some text <span class="footnote">The Footnote</span> Some other text.'); 
}); 

Answer 2

，也许我失去了一些东西，但如果你改变了第一次点击您的HTML（）的时候你问$（“。脚注”）你应该找到新创建的跨度。有时DOM修改和DOM查询之间存在延迟问题，但只有当您一个接一个地说明您的语句时才会遇到这些问题。在你的情况下，当用户转到＃bold-footnote-button时，浏览器总是有更新的时间。也许问题在于你在第一个例子中对字符串和class属性使用双引号。

使用您的浏览器开发工具，如果它正确地获取类属性