如何在Ajax加载更多搜索结果后重新执行脚本

我正在实现Klevu的搜索结果页，整体操作较为简单。目前遇到的问题是，搜索结果页显示了不应出现的Add to Cart按钮，此问题已得到Klevu确认。他们建议我用CSS隐藏该按钮，我编写了如下脚本：

window.addEventListener("load", () =>{
document.querySelectorAll('.kuProdAdditional').forEach(item => item.parentNode.removeChild(item));
})

该脚本原本运行正常，但添加了Klevu的无限滚动脚本后出现新问题：无限滚动通过Ajax调用加载初始结果及后续分页内容，导致所有搜索结果（包括初始结果）再次显示Add to Cart按钮。我需要让脚本在每次Ajax调用完成后都能执行，但无法修改该Ajax调用的逻辑。请问是否有办法检测页面加载完成以重新执行脚本？我并非专业开发人员，只是被安排处理此事的IT人员。

优先选择：用CSS直接隐藏（最简单稳定） #

既然Klevu官方建议用CSS处理，直接通过CSS隐藏元素是最省心的方案——不管内容是初始加载还是Ajax动态加载，CSS规则都会自动生效，完全不需要处理脚本触发时机的问题：

.kuProdAdditional {
    display: none !important;
}

把这段代码添加到你的网站全局样式文件，或者搜索结果页的<style>标签中即可。

脚本方案：监听DOM变化（MutationObserver） #

如果必须用脚本移除元素，使用MutationObserver监听搜索结果容器的DOM变化，只要有新内容加载完成就自动执行移除操作：

// 封装移除按钮的逻辑
function removeAddToCartButtons() {
    document.querySelectorAll('.kuProdAdditional').forEach(item => {
        // 确保父节点存在再移除，避免报错
        if (item.parentNode) {
            item.parentNode.removeChild(item);
        }
    });
}

// 页面初始加载完成后执行一次
window.addEventListener("load", removeAddToCartButtons);

// 监听搜索结果容器的DOM变化（替换成你实际的搜索结果容器选择器，比如.klevuResults）
const resultsContainer = document.querySelector('.klevuResults');
if (resultsContainer) {
    const observer = new MutationObserver(() => {
        // 发现新节点添加时，执行移除操作
        removeAddToCartButtons();
    });
    // 启动监听，监听子节点变化及所有子树
    observer.observe(resultsContainer, {
        childList: true,
        subtree: true
    });
}

这个方法会自动检测搜索结果区域的任何动态内容加载，不需要依赖Ajax的回调逻辑，适合无法修改Klevu内部代码的场景。

精准方案：监听Klevu自定义事件（如果支持） #

部分Klevu集成会在搜索/Ajax加载完成后触发自定义事件，你可以尝试监听这类事件来精准执行脚本：

function removeAddToCartButtons() {
    document.querySelectorAll('.kuProdAdditional').forEach(item => {
        if (item.parentNode) {
            item.parentNode.removeChild(item);
        }
    });
}

// 初始加载执行
window.addEventListener("load", removeAddToCartButtons);

// 监听Klevu搜索完成事件（部分版本支持，如不生效可忽略此方法）
document.addEventListener("klevu:search:complete", removeAddToCartButtons);

如果这个事件存在，这是最高效的方案，只会在Klevu完成搜索加载后触发，不会做多余的检测。

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