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

click函数应该可以正常工作，因为您没有使用事件处理程序将新插入的元素作为目标，而是在事件处理程序中。问题可能是没有插入这样的元素，因为你引用了一些问题，就像这样：

$('#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属性。

如果正确获得了class属性，请查看您的浏览器开发工具

DOM加载后的jQuery访问元素

2 个答案: