1

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

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

谢谢！

4

1 回答 1

0

您可以使用该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以上与第一个示例完全相同

于 2013-11-06T15:30:41.800 回答