在 div 上设置 onchange 事件处理程序以运行更改尚不存在的表的函数

Question

我有一个由第三方软件生成的网页。我对生成的内容几乎没有控制权，但我可以在此网页中插入一些 javascript。在这个网页上有一个按钮，点击一段时间后（数据是从这个第三方软件动态请求的，这个时间根据请求而变化很大），并生成一个表格。这个表是在 DIV 中生成的，我知道哪个 ID 并且之前是空的。然后可以使用其他控件（排序，过滤，每页显示的元素数量更改等）来操作此表。它是一个数据表 （datatables.net） 对象。我编写了一个函数，该函数通过 ID 查找此动态创建的表，并更改其内容的某些格式。

现在的问题是如何设置事件处理程序，以便在生成此表或更改其内容时运行此函数。首次加载页面时，DIV 为空，并且 DOM 中没有具有此类 ID 的表。另一个问题是我不知道所有这些过滤等是如何工作的。因此，每次表中的某些内容发生更改时，我都需要在所有更改完成后运行我的函数（所有其他函数都完成工作）。

谢谢！

Answer 1

您可以使用

DOMSubtreeModified事件

$(document).ready(function() {
    $("body").on("DOMSubtreeModified", function() {
        if ($("#dynamicallyCreatedTableID").length>0) {
            //add your event handlers for #dynamicallyCreatedTableID here
        }
    });
});

请注意 $(document).ready() -event 中的封装，这可确保事件仅在单击按钮和更新 DOM 时触发，而不是在最初构建 DOM 本身时触发。

是的 - 我知道DOMSubtreeModified已被弃用，即使它仍然可以在我测试的浏览器中运行。

相反，您可以通过使用 DOM MutationObserver 来实现相同的目的。这是此博客的修改示例：

$(document).ready(function() {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    var body = document.querySelector('body');
    var observer = new MutationObserver(function(mutations) {  
        mutations.forEach(function(mutation) {
            if ($("#dynamicallyCreatedTableID").length>0) {
                //add your event handlers for #dynamicallyCreatedTableID here
            }
        });
    });
    observer.observe(body, {
        attributes: false, 
        childList: true, 
        characterData: false 
    });
});

上面的操作与第一个DOMSubtreeModified示例完全相同