解决jQuery Toggle在Ajax加载更多帖子后失效的问题

问题概述 #

我编写了一段jQuery脚本实现归档页帖子内容的折叠/展开功能，初始加载的第一页帖子正常生效，但通过AJAX加载更多的新帖子无法触发该功能。尝试将处理.quote元素的逻辑加到.load-more按钮的点击事件中，也没能解决问题。

问题根源 #

1. 异步执行顺序错误：之前把处理.quote的代码放在AJAX请求外部，AJAX是异步操作，代码执行时新帖子还没被添加到DOM，自然无法处理新元素。
2. 重复处理旧元素：直接遍历所有.quote会重复处理已经改过的旧元素，导致HTML结构混乱。
3. 事件绑定方式不对：用$(".toggle-more").click()只能绑定页面加载时已存在的元素，AJAX新增的.toggle-more无法触发事件。

修正方案 #

1. 将处理.quote的逻辑移到AJAX请求的成功回调内，并且只处理本次AJAX返回的新元素（即$clients_answer中的.quote）。
2. 使用事件委托（$(document).on('click', '.toggle-more', function(){...})）绑定折叠/展开事件，确保新添加的元素也能触发。
3. 把折叠功能的配置变量（showChar、ellipsestext等）放到全局作用域，让初始化和AJAX回调都能访问。

完整修正代码 #

// 全局共享折叠功能的配置变量
var showChar = 200;
var ellipsestext = "...";
var moretext = "See more";
var lesstext = "See less";

$(document).ready(function() {
    // 初始化第一页的折叠功能
    initQuoteToggle($('.quote'));

    // 用事件委托绑定折叠/展开事件，兼容AJAX新增元素
    $(document).on('click', ".toggle-more", function(e){
        e.preventDefault();
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().slideToggle('50','swing');
    });
});

// 封装折叠功能的初始化函数，方便复用
function initQuoteToggle($elements) {
    $elements.each(function() {
        var content = $(this).html();

        // 避免重复处理已经初始化过的元素
        if(content.length > showChar && !$(this).find('.more-content').length) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="more"><span class="more-content">' + h + '</span>&nbsp;&nbsp;<a href="" class="toggle-more button">' + moretext + '</a></span>';

            $(this).html(html);
        }
    });
}

// AJAX加载更多逻辑
jQuery(function($){ 
    var page = 2;   
    var $clients_grid = $('.client-reviews');
    $clients_grid.isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        percentPosition: false,
        transitionDuration: '0s', 
        hiddenStyle: { opacity: 0 },
        visibleStyle: { opacity: 1 }
    });

    $('body').on('click', '.load-more', function(e) {
        e.preventDefault();
        var data_clients = {
            'action': 'load_clients_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_clients"); ?>'
        };

        $.post(ajaxurl, data_clients, function(response){
            if (response.replace(/^\s*$/, "").length == 0) {
                $('.load-more').text("<?php printf( __( 'No more results', 'bizniz-tools' )); ?>");
                $('.load-more').attr("disabled", true);
                $('.load-more').css({
                    "borderColor": "rgba(214, 213, 210, 1)",
                    "background-color": "inherit",
                    "color": "rgba(214, 213, 210, 1)"
                });   
            } else {
                var $clients_answer = $(response);

                // 先初始化新元素的折叠功能，再添加到DOM
                initQuoteToggle($clients_answer.find('.quote'));

                // 添加到网格并更新布局
                $clients_grid.append($clients_answer)
                    .isotope('appended', $clients_answer);

                $clients_grid.imagesLoaded(function(){
                    $clients_grid.isotope('layout');
                });
                page++;
            }
        });
    }); 
});

关键修改点说明 #

• 封装了initQuoteToggle函数，专门处理指定元素的折叠初始化，避免代码重复。
• 在AJAX成功回调中，先对返回的新元素调用initQuoteToggle，再添加到页面，确保新元素被正确处理。
• 事件委托使用$(document).on('click', '.toggle-more', ...)，确保所有新增的.toggle-more按钮都能触发事件。
• 添加了!$(this).find('.more-content').length判断，避免重复处理已经初始化过的元素，防止HTML结构混乱。

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