点击筛选无刷新加载文章后jQuery样式脚本不生效如何解决？

问题原因 #

你当前的代码仅在页面初始DOM加载完成后执行1次，仅会处理页面加载时已存在的标题元素。通过筛选器无刷新加载的文章属于后续动态插入的DOM元素，不会被原有逻辑捕获处理，因此没有对应样式。

修复方案 #

方案1：封装函数+在筛选器加载完成回调中调用（优先推荐，性能最优） #

将处理逻辑封装为可复用函数，同时添加已处理标记避免重复操作，在筛选器AJAX加载完成后主动调用即可：

jQuery(document).ready(function($){
    // 封装为独立的处理函数
    function highlightLastTitleWord() {
        // 仅选择未被处理过的标题，避免重复嵌套span标签
        $('.products h2.entry-title:not(.processed-last-word)').each(function() {
            const $title = $(this);
            const curHTML = $title.html();
            const text = curHTML.split(/[\s-]/);
            const newtext = '<span style="color:#fbb316;">' + text.pop() + '</span>';
            $title.html(text.join(' ').concat(' ' + newtext)).addClass('processed-last-word');
        })
    }

    // 页面初始加载时执行一次
    highlightLastTitleWord();

    // 在你的筛选器AJAX请求完成回调中新增一行调用即可，示例：
    // $.ajax({
    //   url: '筛选接口地址',
    //   data: 筛选参数
    // }).done(function(res) {
    //   // 原有插入新文章到页面的逻辑
    //   highlightLastTitleWord(); // 新增这行，插入完成后执行样式处理
    // })
});

方案2：使用MutationObserver监听DOM变化（无需修改原有筛选逻辑） #

如果找不到筛选器的加载回调，或者不想修改原有筛选逻辑，可以监听文章容器的DOM变化，有新元素插入时自动执行处理：

jQuery(document).ready(function($){
    function highlightLastTitleWord() {
        $('.products h2.entry-title:not(.processed-last-word)').each(function() {
            const $title = $(this);
            const curHTML = $title.html();
            const text = curHTML.split(/[\s-]/);
            const newtext = '<span style="color:#fbb316;">' + text.pop() + '</span>';
            $title.html(text.join(' ').concat(' ' + newtext)).addClass('processed-last-word');
        })
    }

    // 初始加载执行
    highlightLastTitleWord();

    // 监听文章列表容器的DOM变化
    const productContainer = document.querySelector('.products');
    if (productContainer) {
        const observer = new MutationObserver(function(mutations) {
            // 每次有DOM元素增减时执行处理
            highlightLastTitleWord();
        });
        observer.observe(productContainer, {
            childList: true, // 监听子元素增减
            subtree: true // 监听所有后代元素的变化
        });
    }
});

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