如何监听div内容变化并触发对应JavaScript函数执行

方案1：直接复用现有load回调（推荐） #

你当前的refreshTable函数里的load方法本身就提供了请求完成、内容更新后的回调入口，直接在回调里调用你定义的scroll函数即可，不需要额外加监听逻辑，性能最高也没有兼容问题。
修改后的完整代码：

$(document).ready(function(){
    refreshTable();
});
function refreshTable(){ // 加载数据到div
    $('#messbox').load('getData.php', function(){ 
        // 内容加载完成后直接调用滚动函数
        scroll();
        setTimeout(refreshTable, 1000); 
    });
}
function scroll(){ // 需要调用的自定义函数
    $("#messbox").scrollTop($("#messbox")[0].scrollHeight);
}

方案2：使用MutationObserver监听DOM变更 #

如果你无法修改原有加载逻辑，需要独立监听div内容变化，可以用原生的MutationObserver API实现：

$(document).ready(function(){
    // 要监听的目标节点
    const targetNode = document.getElementById('messbox');
    // 监听配置：监听子节点变更、子树内容变更
    const config = { childList: true, subtree: true, characterData: true };
    // 内容变更时触发的回调
    const callback = function(mutationsList, observer) {
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList' || mutation.type === 'characterData') {
                // 内容变化时调用滚动函数
                scroll();
            }
        }
    };
    // 创建观察器实例并启动监听
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);

    // 原有逻辑不变
    refreshTable();
});

// 原有函数无需修改
function refreshTable(){ 
    $('#messbox').load('getData.php', function(){ setTimeout(refreshTable, 1000); });
}
function scroll(){ 
    $("#messbox").scrollTop($("#messbox")[0].scrollHeight);
}

注意事项 #

• 优先选方案1，没有额外的监听性能开销，也不会出现监听漏触发的问题
• MutationObserver兼容所有现代浏览器，IE11及以上版本都支持，如果需要兼容更低版本IE可以改用jQuery的DOMSubtreeModified事件，但该事件触发频率高性能差，不推荐使用

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