如何在AJAX过滤内容后执行DOM属性修改的JavaScript函数

问题背景 #

现有一段JavaScript代码，负责根据localStorage中的数据为页面元素绑定书签点击事件（SaveListItem或RemoveListItem），页面初始加载时逻辑正常，但当通过AJAX分类筛选加载新内容后，新元素无法触发该逻辑，导致DOM属性未正确设置。

原代码如下：

ready(function(){ 
     let element = document.querySelector("body");
if(element.classList.contains("path-api-catalog") ){

    let name1 = document.querySelectorAll(".tooltip_heading > h6");
        for (let i = 0; i < name1.length; i++) {
            let title = name1[i].innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
            let titleURL = name1[i].parentNode.parentNode.querySelector('.btn.primary-btn').href;
            if (localStorage.getItem(title) != null){

            if(localStorage[title]===titleURL){
                let titleDiv = name1[i].parentNode;
                titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','RemoveListItem(event)');
                }
            }else{
                let titleDiv = name1[i].parentNode;
                titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','SaveListItem(event)');
            }
        }
    }
})

解决方案 #

1. 封装核心逻辑为独立函数 #

先把重复执行的DOM处理逻辑抽成单独函数，方便在初始加载和AJAX完成后调用：

function initBookmarkIcons() {
    const element = document.querySelector("body");
    if (!element.classList.contains("path-api-catalog")) return;

    const nameList = document.querySelectorAll(".tooltip_heading > h6");
    nameList.forEach(nameEl => {
        const title = nameEl.innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
        const titleURL = nameEl.parentNode.parentNode.querySelector('.btn.primary-btn')?.href;
        if (!titleURL) return;

        const titleDiv = nameEl.parentNode;
        const bookmarkIcon = titleDiv.querySelector('.bookmark-icon');
        if (!bookmarkIcon) return;

        if (localStorage.getItem(title) === titleURL) {
            bookmarkIcon.setAttribute('onclick', 'RemoveListItem(event)');
        } else {
            bookmarkIcon.setAttribute('onclick', 'SaveListItem(event)');
        }
    });
}

// 初始加载执行
ready(initBookmarkIcons);

2. 方法一：监听DOM变化（通用方案） #

使用MutationObserver监听AJAX内容所在容器的DOM变化，当新元素插入时自动执行初始化函数：

// 替换为实际存放AJAX加载内容的容器选择器
const targetContainer = document.querySelector('.api-catalog-content');
if (targetContainer) {
    const observer = new MutationObserver((mutations) => {
        // 检查是否有新节点添加
        const hasNewNodes = mutations.some(mutation => mutation.addedNodes.length > 0);
        if (hasNewNodes) {
            initBookmarkIcons();
        }
    });

    // 配置监听选项：监听子节点变化和子树变化
    observer.observe(targetContainer, {
        childList: true,
        subtree: true
    });
}

3. 方法二：绑定筛选按钮的点击事件（针对性方案） #

如果知道筛选按钮的选择器，直接给按钮添加点击事件，在AJAX请求完成后执行初始化：

// 替换为实际筛选按钮的选择器
const filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        // 延迟执行，确保AJAX内容加载完成，时间可根据实际情况调整
        setTimeout(initBookmarkIcons, 500);
    });
});

如果页面有自定义的AJAX完成事件（比如ajaxContentLoaded），可以直接监听该事件：

document.addEventListener('ajaxContentLoaded', initBookmarkIcons);

这种方式比延迟更可靠，需要前端框架或页面本身提供该事件支持。

4. 方法三：全局AJAX事件监听（若使用jQuery等库） #

如果页面使用jQuery发起AJAX请求，可以监听全局的ajaxComplete事件：

$(document).ajaxComplete(function() {
    initBookmarkIcons();
});

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