Rails 5中使用will_paginate实现加载更多按钮时重复加载问题求助

这种重复加载的情况真的挺闹心的，我之前也碰到过类似的问题，大概率是这几个地方出了问题，咱们一步步排查解决：

1. 事件绑定重复触发请求 #

最常见的原因就是加载更多按钮的点击事件被重复绑定了，比如每次加载完新内容后，脚本又重新绑定了一次点击事件，导致点击一次触发两次AJAX请求。

解决方法：

确保事件只绑定一次，比如在你的pagination.js.coffee里，先移除旧的绑定再重新绑定，同时别忘了阻止默认行为：

$(document).on 'turbolinks:load', ->
  # 先移除之前的绑定，避免重复触发
  $(document).off('click', '.load-more').on('click', '.load-more', (e) ->
    e.preventDefault() # 阻止a标签默认跳转行为
    $button = $(this)
    next_page = $button.data('page')

    $.ajax
      url: '/links'
      data: { page: next_page }
      type: 'GET'
      dataType: 'script'
      beforeSend: ->
        $button.text('加载中...').prop('disabled', true)
      complete: ->
        $button.text('加载更多').prop('disabled', false)
  )

注：用turbolinks:load代替$ ->，适配Rails 5默认的Turbolinks，避免页面缓存导致脚本重复执行

2. index.js.erb里重复渲染内容 #

检查你的index.js.erb，是不是不小心写了两次append逻辑？比如重复调用了$('.links-container').append(...)，导致返回的内容被添加两次。

正确的index.js.erb示例：

# 只append一次新内容，建议用partial渲染更清晰
$('.links-container').append('<%= j render partial: 'links/link', collection: @links %>');

# 更新下一页页码或移除按钮
<% if @links.next_page %>
  $('.load-more').data('page', <%= @links.next_page %>);
<% else %>
  $('.load-more').fadeOut().remove();
<% end %>

3. 控制器分页逻辑错误 #

检查你的links_controller.rb（你写的links_controller.erb应该是笔误），是不是@links的分页参数没正确获取，导致每次请求都返回同一页内容？

正确的控制器index动作：

class LinksController < ApplicationController
  def index
    # 确保分页参数正确，且排序稳定避免重复
    @links = Link.order(created_at: :desc).paginate(page: params[:page], per_page: 3)
    respond_to do |format|
      format.html
      format.js
    end
  end
end

4. 排查小技巧 #

打开浏览器开发者工具的Network标签，点击加载更多按钮：

• 如果看到两次相同的AJAX请求：那就是事件重复绑定或请求被重复触发的问题
• 如果只有一次请求，但返回的内容里有重复记录：那是控制器分页逻辑的问题
• 如果请求返回内容正常，但页面上显示两次：那是index.js.erb的append逻辑重复了

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