WooCommerce中Ajax完成后无法为动态生成元素添加类的问题

问题核心 #

WooCommerce原生Ajax筛选会重新渲染产品列表，初始添加的类会被移除；而全局ajaxComplete事件触发时，新的产品DOM元素可能还未插入页面，导致无法给新生成的.item添加类。

方案一：使用WooCommerce原生事件（推荐） #

WooCommerce在Ajax更新产品列表后会触发updated_wc_div事件，该事件会在DOM更新完成后触发，能确保新的产品元素已经存在于页面中。

修改后的代码：

jQuery(document).ready(function($) { 
    // 页面初始加载时给产品项加类
    $('.item').addClass('size_2x1');

    // 监听WooCommerce Ajax筛选完成后的专属事件
    $(document).on('updated_wc_div', function() {
        $('.item').addClass('size_2x1');
    });
});

方案二：用MutationObserver监听DOM变化 #

如果上述原生事件不生效，可以使用MutationObserver监听产品容器的DOM变化，一旦有新元素添加就自动执行加类操作，兼容性更强。

代码示例：

jQuery(document).ready(function($) { 
    // 定义添加类的复用函数
    function addSizeClass() {
        $('.item').addClass('size_2x1');
    }

    // 初始加载时执行一次
    addSizeClass();

    // 监听#items容器的子节点变化
    const itemsContainer = document.getElementById('items');
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 检测到有新节点添加时，重新给所有.item加类
            if (mutation.addedNodes.length > 0) {
                addSizeClass();
            }
        });
    });

    // 配置监听规则：监听子节点变化及后代节点
    observer.observe(itemsContainer, {
        childList: true,
        subtree: true
    });
});

原代码无效的原因 #

全局ajaxComplete会在所有Ajax请求完成时触发，但WooCommerce的Ajax请求完成后，新的产品DOM元素可能还未插入页面，此时$('.item')只能找到旧元素，无法操作刚生成的新元素。而WooCommerce原生事件或MutationObserver能确保在DOM更新完成后再执行加类操作。

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