解决jQuery动态加载内容事件失效问题：事件委托与重新绑定机制详解

$('.show_more').unbind().click(function(e) {
    // ... 事件处理逻辑 ...
});

// 确保在DOM加载完成后执行
$(document).ready(function() {
    // 将事件绑定到document对象，并委托给所有当前和未来存在的 .show_more 元素
    $(document).on('click', '.show_more', function(e) {
        e.preventDefault(); 
        var ID = $(this).attr('id');
        var vals = $(this).data('val');
        var feds = $(this).data('feds');

        // 隐藏当前点击的“Show more”按钮
        // 注意：这里可能需要更精确的定位，以避免隐藏所有 .show_more 按钮
        // 例如：$(this).hide(); 或者 $(this).closest('.show_more_main').hide();
        $(this).hide(); 

        // 显示加载提示（如果存在）
        $(this).siblings('.loding').show();

        var pathss = '<?php echo base_url("Main/GetFeedCommentsById"); ?>'; // PHP变量在JS中直接输出

        $.ajax({
            type: 'POST',
            url: pathss,
            data: { id: ID, vals: vals },
            success: function(html) {
                // 移除旧的“Show More”容器
                $('#show_more_main' + ID).remove();
                // 将新的内容（包含新的“Show More”按钮）添加到页面
                $('.postList' + feds).append(html);
                // 使用事件委托后，无需在此处重新绑定事件
            },
            error: function() {
                // 错误处理
                console.error("Ajax request failed.");
                $(this).show(); // 如果失败，重新显示按钮
                $(this).siblings('.loding').hide(); // 隐藏加载提示
            }
        });
    });
});

// PHP循环部分，生成HTML
function fetch()
{
    // ... 其他逻辑 ...
    foreach($FeedData as $feeds)
    {
        if($feeds['flag']=="feed")
        {
            // ... 获取评论数据 ...
            if($TotalFeedsComments>1)
            {
                // 确保 $postID 和 $FeedId 变量在此作用域内可用
                $Loads='<div class="show_more_main" id="show_more_main'.$postID.'">
                            <input type="hidden" name="fixs" value="'.$postID.'" id="fixs">
                            <input type="hidden" name="MinValue" value="'.$postID.'" id="MinValue">
                            <input type="hidden" name="FeedIdd" value="'.$FeedId.'" id="FeedIdd">
                            <input type="hidden" name="MaxValue" value="'.$postID.'" id="MaxValue">
                            <span id="btn_show_more_'.$postID.'" data-val="'.$postID.'" data-status="'.$postID.'" class="show_more" title="Load more posts" data-feds="'.$FeedId.'">Show more</span>
                            <span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
                        </div>';
                echo $Loads; // 输出HTML
            }
        }
    }
    // 注意：这里的 <script> 标签应该在页面底部或单独的JS文件中，而不是在每次Ajax响应中。
    // 如果这是初始页面加载时的JS，则上面事件委托的代码就足够了。
    // 如果Ajax响应中也包含 <script> 标签，那会造成重复执行和潜在问题。
}

// 定义一个具名的事件处理函数
function handleShowMoreClick(e) {
    e.preventDefault(); 
    var ID = $(this).attr('id');
    var vals = $(this).data('val');
    var feds = $(this).data('feds');

    $(this).hide(); // 隐藏当前点击的按钮
    $(this).siblings('.loding').show(); // 显示加载提示

    var pathss = '<?php echo base_url("Main/GetFeedCommentsById"); ?>'; 

    $.ajax({
        type: 'POST',
        url: pathss,
        data: { id: ID, vals: vals },
        success: function(html) {
            $('#show_more_main' + ID).remove();
            $('.postList' + feds).append(html);

            // Ajax成功后，新的 .show_more 元素已经添加到DOM
            // 此时需要重新绑定事件到所有（包括新旧） .show_more 元素
            // 注意：这里需要确保只绑定一次，因此先 unbind() 是必要的
            $('.show_more').unbind('click').click(handleShowMoreClick);
        },
        error: function() {
            console.error("Ajax request failed.");
            $(this).show();
            $(this).siblings('.loding').hide();
        }
    });
}

// 页面初始加载时绑定事件
$(document).ready(function() {
    $('.show_more').unbind('click').click(handleShowMoreClick);
});