javascript - 在 jQuery 中创建元素后如何执行一些代码？

Question

这个问题已经有答案了:

jQuery on load of dynamic element (2 个回答)

已关闭 9 年前。

基本上我想做这样的事情:

$("#myElement").ready(function(){
    $("#myElement").attr("id", "new-id");
});

这可能吗？我看过 jQuery live()现在已弃用，他们建议使用 on() ，但我见过的所有解决方案都需要将事件处理程序附加到元素，例如单击、悬停等。我不想附加事件处理程序，我想简单地修改加载的 HTML，当它会在将来加载。

HTML 由 ajax 加载，在这种特殊情况下，我无权修改 ajax 文件。

Answer 1

突变观察者

使用MutationObserver是当前推荐的方法，尽管浏览器支持需要 IE11+:

var target = document.getElementById('content');

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            var addedNode = mutation.addedNodes[i];
            if (addedNode.id == "myElement") {
                alert("#myElement added!");
            }
        }
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};
observer.observe(target, config);

Here is a working example

<小时/>

突变事件(已弃用)

此方法已弃用，但将提供 IE9+ 的浏览器支持:

This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

( Above extract taken from here )

对于 Mutation Events，有一个名为 DOMNodeInserted 的事件，您可以监听该事件，您还可以指定 #myElement 选择器来获取您想要的确切元素想要。

此示例使用 JQuery:

$(document).on('DOMNodeInserted', '#myElement', function(){
    $("#myElement").attr("id", "new-id");
});

注意:document 应替换为您需要的选择器，限制区域越多越好。

Here is a working example (2秒后添加元素)