为何jQuery在Ajax加载的BuddyPress内容中失效？求解决方案

针对你遇到的Ajax加载内容导致jQuery代码无法找到元素的问题，有以下几个靠谱的解决办法：

方法1：利用BuddyPress自带的事件钩子 #

BuddyPress在活动内容通过Ajax加载完成后，会触发特定的JS事件，直接绑定这些事件来执行你的插入逻辑就行，这是最贴合BuddyPress场景的方案：

jQuery(document).ready(function($) {
    // 监听活动加载完成事件（覆盖初始加载和加载更多场景）
    $(document).on('bp_activity_loaded bp_after_load_more', function() {
        insertButtonAfterNthWidget();
    });

    // 封装插入逻辑，方便复用
    function insertButtonAfterNthWidget() {
        // 先移除已插入的按钮，避免重复添加
        $('#activity-filterable-list .grid .grid').find('.inserted-button').remove();
        // 每第3个widget-box后插入按钮（:eq(2)对应索引从0开始的第3个元素）
        $('#activity-filterable-list .grid .grid').children('.widget-box:eq(2)').after('<button class="inserted-button">button</button>');
    }

    // 初始加载时也执行一次（如果初始内容不是Ajax加载的话）
    insertButtonAfterNthWidget();
});

方法2：使用MutationObserver监听DOM变化 #

如果BuddyPress的事件钩子不好用，用原生的MutationObserver监听目标容器的DOM变化，一旦有新的widget-box被添加，就执行插入操作：

jQuery(document).ready(function($) {
    const targetContainer = document.querySelector('#activity-filterable-list .grid .grid');
    if (!targetContainer) return;

    // 配置观察器选项
    const observerConfig = {
        childList: true, // 监听子元素的添加/删除
        subtree: false   // 只监听目标容器的直接子元素
    };

    // 定义回调函数
    const observerCallback = function(mutationsList) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // 检查是否有widget-box被添加
                const hasWidgetBox = Array.from(mutation.addedNodes).some(node => node.classList?.contains('widget-box'));
                if (hasWidgetBox) {
                    // 执行插入逻辑，先去重再添加
                    $('#activity-filterable-list .grid .grid').find('.inserted-button').remove();
                    $('#activity-filterable-list .grid .grid').children('.widget-box:eq(2)').after('<button class="inserted-button">button</button>');
                }
            }
        }
    };

    // 创建观察器实例并启动观察
    const observer = new MutationObserver(observerCallback);
    observer.observe(targetContainer, observerConfig);

    // 初始执行一次
    $('#activity-filterable-list .grid .grid').children('.widget-box:eq(2)').after('<button class="inserted-button">button</button>');
});

方法3：绑定加载更多按钮的点击事件 #

如果你的Ajax加载是通过点击「加载更多」按钮触发的，可以直接给按钮绑定点击事件，在Ajax请求完成后执行插入操作：

jQuery(document).ready(function($) {
    // 给加载更多按钮绑定事件（按钮选择器根据实际情况调整）
    $(document).on('click', '#activity-load-more', function() {
        // 用setTimeout确保Ajax完成后DOM已更新，或者用$.ajaxComplete
        setTimeout(function() {
            $('#activity-filterable-list .grid .grid').find('.inserted-button').remove();
            $('#activity-filterable-list .grid .grid').children('.widget-box:eq(2)').after('<button class="inserted-button">button</button>');
        }, 500); // 延迟时间根据实际加载速度调整
    });

    // 初始加载执行
    $('#activity-filterable-list .grid .grid').children('.widget-box:eq(2)').after('<button class="inserted-button">button</button>');
});

额外提示 #

• 给插入的按钮加一个专属类（比如inserted-button），每次执行前先移除，避免重复插入多个按钮。
• 如果要实现「每X个元素后都插入」（比如每3个插一个），把children('.widget-box:eq(2)')改成children('.widget-box:nth-child(3n)')即可（n从1开始计数）。

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