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

Question

我有一个由第三方软件生成的网页。我对生成的内容几乎没有控制权，但我可以在该网页中插入一些 JavaScript。在这个网页上有一个按钮，点击它一段时间后(从这个第三方软件动态请求数据，这个时间根据请求变化很大)并生成一个表格。这个表是在一个DIV中生成的，它的ID我知道并且之前是空的。然后可以使用其他控件来操作该表(排序、过滤、每页显示的元素数量更改等)。它是一个 DataTables (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() 事件中的封装，这确保了该事件仅在单击按钮且更新 DOM 时触发，而不是在 DOM 本身初始时触发已建成。

是的 - 我知道 DOMSubtreeModified 已弃用，尽管它在我测试的浏览器中仍然有效。

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

$(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 示例完全相同