MutationObserver未监听TD元素变更且无控制台日志，求代码修复

我来帮你搞定这个问题~ 你的脚本不生效的核心原因是：页面初始绑定的MutationObserver只监听了当时存在的<td>元素，但每15秒表格刷新后，旧的td会被新DOM节点替换，旧的监听就失效了。下面是具体的修复方案和完整代码：

问题分析 #

1. 你在jQuery(document).ready里给初始加载的td绑定了Observer，但.load()方法会把.fbs_results内的所有元素替换成新的，原来的td被移除，Observer自然无法监听新元素。
2. 你的tdChanges函数没有针对性地提取变更信息，就算有触发也看不到直观的日志。

修复步骤 #

1. 将监听td的逻辑封装成独立函数，方便每次表格刷新后重复调用。
2. 在.load()的回调函数末尾调用这个封装函数，给新加载的td绑定Observer。
3. 优化变更处理函数，输出更清晰的变更详情（比如td的位置、旧值、新值）。

完整修复代码 #

jQuery(document).ready(function( $ ) {
    /** Change URL */
    setInterval(function() {
        $.ajax({
            url: 'http://localhost:8888/profitmanager/wp-content/plugins/football-stats/update.php'
        }).done(function(){
            $('.fbs_results').load( location.href+" .fbs_results>*", function(){
                var hidden = [];
                $.each(JSON.parse(localStorage.getItem("table_state")), function(index, value) {
                    if(value == 'hidden'){
                        $('tr[data-index="'+index+'"]').hide();
                    }
                });
                // 表格刷新后，重新绑定TD监听
                setupTdObservers();
            } );
        });
    }, 15000);

    // 配置MutationObserver，确保能捕捉文本内容变更
    const observerConfig = {
        characterData: true,
        characterDataOldValue: true,
        childList: true,
        subtree: true
    };

    // 处理TD变更的函数，输出清晰的日志
    function handleTdChanges(mutations) {
        mutations.forEach((mutation) => {
            // 捕捉文本内容变更
            if (mutation.type === 'characterData' && mutation.oldValue !== mutation.target.data) {
                const tdElement = mutation.target.parentElement;
                console.log(`TD元素发生变更:`);
                console.log(`位置: 第${tdElement.parentElement.rowIndex+1}行，第${tdElement.cellIndex+1}列`);
                console.log(`旧值: ${mutation.oldValue.trim()}`);
                console.log(`新值: ${mutation.target.data.trim()}`);
                console.log('---');
            }
            // 捕捉子节点变更（比如TD内有其他元素的情况）
            if (mutation.type === 'childList') {
                const tdElement = mutation.target;
                console.log(`TD子元素变更:`);
                console.log(`位置: 第${tdElement.parentElement.rowIndex+1}行，第${tdElement.cellIndex+1}列`);
                console.log(`新增节点: ${mutation.addedNodes.length > 0 ? mutation.addedNodes[0].outerHTML : '无'}`);
                console.log(`移除节点: ${mutation.removedNodes.length > 0 ? mutation.removedNodes[0].outerHTML : '无'}`);
                console.log('---');
            }
        });
    }

    // 封装绑定Observer的函数
    function setupTdObservers() {
        // 给所有新的TD绑定Observer
        const tds = document.querySelectorAll('.fbs_results td');
        Array.from(tds).forEach(function(td) {
            const observer = new MutationObserver(handleTdChanges);
            observer.observe(td, observerConfig);
        });
    }

    // 页面初始加载时，绑定一次TD监听
    setupTdObservers();
});

关键改进点 #

• 新增setupTdObservers函数，统一管理TD的监听绑定，每次表格刷新后调用。
• 优化handleTdChanges函数，区分文本变更和子元素变更，输出更直观的调试信息。
• 在.load()回调中调用setupTdObservers，确保新加载的TD被监听。

内容的提问来源于stack exchange，提问作者user11276769