javascript - 当元素接收到内容时使用 Javascript 进行检测

Question

单击时，id 为 button 的 div 发出 AJAX 请求并在 id 为 newContent 的 div 中添加新内容。

在 div button 获得点击并且 ID 为 newContent 的 div 收到内容后，我正在尝试启动一个功能。

<div id="button"> </div>
<div id="newContent"></div>

不幸的是，我无法更改包含 AJAX 函数的 .js 文件。

我没有成功:

var contentdiv = document.getElementById('newContent');

window.onload = function() {
    contentdiv.onreadystatechange = function () {
        if (contentdiv.readyState == "interactive") {
           myFunction();
        } 
    }
}

在内容成功添加到 newContent div 后，我该怎么做才能启动我的功能？

Answer 1

对于现代浏览器，我会推荐mutation observers:

        var observer = new MutationObserver( myFunction );
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: true, subtree: true };

        // pass in the target node, as well as the observer options
        observer.observe(contentDiv, config);

这会为您的元素添加一个突变观察器。您可以配置观察者需要监听的选项。 Jquery 本身(还)不支持这个。当有内容添加到 contentDiv 时，这将触发。或者更改 contentDiv 中的子元素。

• childList Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed. attributes Set to true if mutations to target's attributes are to be observed.
• characterData Set to true if mutations to target's data are to be observed.
• subtree Set to true if mutations to not just target, but also target's descendants are to be observed.
• attributeOldValue Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.
• characterDataOldValue Set to true if characterData is set to true and target's data before the mutation needs to be recorded.
• attributeFilter Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.

Source: MDN

哪些浏览器支持:CanIuse
在这里阅读更多:MDN

MutationObserver 是一个强大的工具。它还提供有关元素更改的信息。我建议阅读各种可能性。现在它会做你想做的事。

As a fall back for IE9 and 10 you can use:

contentDiv.addEventListener ('DOMNodeInserted', myFunction, false);

但是，这不会承载与变异观察器 相同的功能，MDN 不鼓励使用它。