List.js在Elementor WooCommerce产品小部件中报错的解决求助

我有个用List.js展示WooCommerce产品表格的短代码，在独立页面能正常运行，但嵌入Elementor自定义小部件后，表格能显示，但List.js抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'childNodes')

已尝试的方案 #

• 使用Elementor前端钩子初始化List.js：

jQuery( window ).on( 'elementor/frontend/init', () => {
    const addHandler = ( $element ) => {
        console.log('hello');
        console.log($element);

        console.log( $element.find( 'table tbody' ).html() );

        const wcProductTable = new List( 'wc-product-table', {
            valueNames: ['image', 'name', 'stock', 'stock_status', 'qty', 'price', 'rating', 'variations', 'cart', 'price_raw', 'rating_raw', 'sales_raw', 'creation_raw'],
            page: 11,
            pagination: true
        } );
    };
 
    elementorFrontend.hooks.addAction( 'frontend/element_ready/wc_product_table.default', addHandler );
 } );

• 测试6秒延迟执行初始化：

setTimeout( () => {
    const wcProductTable = new List( 'wc-product-table', {
            valueNames: ['image', 'name', 'stock', 'stock_status', 'qty', 'price', 'rating', 'variations', 'cart', 'price_raw', 'rating_raw', 'sales_raw', 'creation_raw'],
            page: 11,
            pagination: true
        } );
}, 6000 );

注：脚本依赖list-table和elementor-frontend。

解决建议 #

1. 改用局部元素定位，避免全局ID冲突 #

Elementor页面可能存在多个相同ID的元素（比如重复添加小部件），List.js用全局ID查找会导致异常。应该基于当前小部件的$element来定位表格容器：

jQuery( window ).on( 'elementor/frontend/init', () => {
    const addHandler = ( $element ) => {
        // 从当前小部件范围内查找表格容器
        const tableContainer = $element.find('#wc-product-table')[0];
        if (!tableContainer) return;

        const wcProductTable = new List( tableContainer, {
            valueNames: ['image', 'name', 'stock', 'stock_status', 'qty', 'price', 'rating', 'variations', 'cart', 'price_raw', 'rating_raw', 'sales_raw', 'creation_raw'],
            page: 11,
            pagination: true
        } );
    };
 
    elementorFrontend.hooks.addAction( 'frontend/element_ready/wc_product_table.default', addHandler );
 } );

2. 监听DOM变化，确保表格内容完全渲染 #

Elementor的frontend/element_ready钩子可能在元素结构加载完成，但产品数据还没渲染到表格时触发。可以用MutationObserver监听表格tbody的内容变化，确认有子节点后再初始化List.js：

jQuery( window ).on( 'elementor/frontend/init', () => {
    const addHandler = ( $element ) => {
        const tbody = $element.find('table tbody')[0];
        if (!tbody) return;

        const observer = new MutationObserver((mutations) => {
            if (tbody.childNodes.length > 0) {
                observer.disconnect();
                const tableContainer = $element.find('#wc-product-table')[0];
                new List( tableContainer, {
                    valueNames: ['image', 'name', 'stock', 'stock_status', 'qty', 'price', 'rating', 'variations', 'cart', 'price_raw', 'rating_raw', 'sales_raw', 'creation_raw'],
                    page: 11,
                    pagination: true
                } );
            }
        });

        observer.observe(tbody, { childList: true });
    };
 
    elementorFrontend.hooks.addAction( 'frontend/element_ready/wc_product_table.default', addHandler );
 } );

3. 验证依赖加载顺序 #

确认list-table脚本在elementor-frontend之后加载，或者在初始化前检查List对象是否存在：

// 在初始化List前添加检查
if (typeof List === 'undefined') {
    console.error('List.js未正确加载');
    return;
}

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