如何在子div添加或移除时刷新目标div？

嘿，你的需求用原生的 MutationObserver 来实现再合适不过了！它能精准捕捉到.dock-container的子节点添加/移除操作，只有当容器真的发生变化时才触发刷新，彻底避免了定时轮询带来的无意义请求，效率高多了。

下面是修改后的完整代码，我把逻辑梳理得明明白白：

jQuery(document).ready(function($) {
    // 先获取目标容器，确保它存在
    const dockContainer = $('.dock-container')[0];
    if (!dockContainer) return;

    // 保存当前子节点数量，用来过滤重复触发的情况（可选）
    let previousChildCount = dockContainer.children.length;

    // 创建MutationObserver实例，定义变化触发后的逻辑
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 检查是否有子节点被添加或移除
            if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
                // 可选：对比子节点数量，避免同一操作触发多次刷新
                const currentChildCount = dockContainer.children.length;
                if (currentChildCount !== previousChildCount) {
                    previousChildCount = currentChildCount;
                    // 执行你的AJAX刷新逻辑
                    refreshDockContainer();
                }
            }
        });
    });

    // 配置观察规则：只监听直接子节点的添加/移除
    const observerConfig = {
        childList: true,
        subtree: false // 如果要监听嵌套的孙子节点，改成true即可
    };

    // 启动监听
    observer.observe(dockContainer, observerConfig);

    // 把你原来的AJAX逻辑放到这个刷新函数里
    function refreshDockContainer() {
        $.ajax({
            url: '你的请求地址',
            method: 'GET', // 根据实际需求改成POST
            success: function(response) {
                // 更新容器内容
                $('.dock-container').html(response);
            },
            error: function(xhr, status, error) {
                console.error('刷新失败:', error);
            }
        });
    }

    // 可选：如果后续需要停止监听（比如页面销毁时），调用下面这行
    // observer.disconnect();
});

关键细节说明： #

• MutationObserver 是浏览器原生API，兼容性覆盖绝大多数现代浏览器（除了IE11及更早版本），相比定时轮询setInterval，它是事件驱动的，只有DOM真的变化才会触发，性能更优。
• 配置项里的childList: true专门用来监听子节点的添加和移除，subtree: false限制只监听直接子节点，如果你的子div还嵌套了更深的节点需要监听，把这个值改成true就行。
• 我加了previousChildCount的对比，是为了避免某些DOM操作导致的重复触发（比如一次添加多个子节点可能触发多次mutation事件），如果不需要这个额外校验，可以直接去掉，只要检测到addedNodes或removedNodes就执行刷新。

这样就完美实现了你要的“有变化才刷新，无变化不动作”的需求啦！

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