页面代码改变后执行jquery

在网页开发中，我们经常会遇到需要在页面代码发生改变后执行jQuery代码的情况，这种需求可能源于多种原因，比如动态内容的加载、用户交互响应或者页面元素的更新，为了实现这一功能，我们可以采用几种不同的方法来确保jQuery代码在页面更新后正确执行。

1. 使用MutationObserver API

MutationObserver API是现代浏览器提供的一个强大的工具，它允许我们监听DOM的变化，通过这个API，我们可以在DOM树发生变化时执行特定的代码。

// 创建一个观察者实例并传入回调函数
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // 检查是否是我们需要的节点变化
        if (mutation.type === 'childList') {
            // 在这里执行你的jQuery代码
            $(document).ready(function() {
                // 你的jQuery代码
            });
        }
    });
});
// 配置观察选项：观察子节点的变化
var config = { childList: true, subtree: true };
// 传入目标节点和观察选项
observer.observe(document.body, config);

2. 使用jQuery的$(document).ready()和$(window).on('load', ...)

虽然$(document).ready()通常用于页面加载完成后执行代码，但有时我们也需要在页面内容动态加载后执行代码，这时，我们可以结合$(window).on('load', ...)来实现。

// 当文档加载完成后执行
$(document).ready(function() {
    // 初始的jQuery代码
});
// 当页面完全加载完成后执行
$(window).on('load', function() {
    // 动态加载内容后的jQuery代码
});

3. 使用jQuery的$.ajaxComplete()方法

如果你的页面更新是通过Ajax请求实现的，那么可以使用$.ajaxComplete()方法来监听所有Ajax请求的完成事件，并在请求完成后执行代码。

$(document).ajaxComplete(function() {
    // Ajax请求完成后执行的jQuery代码
});

利用事件委托

如果页面中新增的元素需要绑定事件，可以使用事件委托来处理，事件委托是一种利用冒泡机制的技术，可以在父元素上监听事件，然后根据事件的目标元素来决定是否执行特定的代码。

// 假设我们监听点击事件
$(document).on('click', '.new-element-class', function() {
    // 只有当点击了新增的具有特定class的元素时，这里的代码才会执行
});

定时检查

在某些情况下，如果上述方法都不适用，我们还可以采用定时检查的方式来检测页面的变化，并在变化发生时执行代码。

setInterval(function() {
    // 检查页面是否有变化
    if (/* 检测逻辑 */) {
        // 执行jQuery代码
    }
}, 1000); // 每1000毫秒检查一次

使用这些方法，我们可以确保在页面代码改变后，jQuery代码能够及时且正确地执行，每种方法都有其适用场景，开发者应根据实际情况选择最合适的方法。