Question

情况：

加载外部第三方脚本，向DOM添加一些内容。

目标：

只要将这些内容添加到DOM中，我就想用一些jQuery来操作它的内容。

为了确保在操作它之前存在这个新的DOM元素，我可以这样做：

var updateText, target;

updateText = function() {
    target = $('#targetElement');
    if(target.length) {
        target.text('Updated!');
    } else {
        window.setTimeout(updateText, 500);
    }
};

updateText();

这看起来有点可怕。有没有更好的方法来处理这种依赖？

相关限制：

第三方脚本没有公开的API。
为了工作，这个特别的脚本显然必须通过<script>元素加载src属性中的特定网址。因此，通过传递给$script.js加载脚本不起作用。
当它运行时，它还依次加载自己的外部依赖项包。即使我可以在启动我自己的代码之前检查初始脚本是否已加载，但我不知道我可以检查这些其他外部脚本。

Answer 1

您可以使用DOMSubtreeModified事件执行此操作。这是一个例子：

＆＃13;

$("#a").bind("DOMSubtreeModified", function() {
    alert("tree changed");
    $("span").css("background", "blue");
});


$("#add").click(function() {a
    $("#a").append("<span>hey there</span><br>");
});

＆＃13;

div {
    background-color: black;
}

span {
    background-color: red;
    color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>

<button id="add">Add to Div</button>

＆＃13;

操纵由第三方脚本添加的DOM元素

1 个答案: