Question

我正在尝试使用ajax进行分页，使用pushState来更新url。我遇到的问题是它只在第一次执行。

我的完整设置如下

Rails 3.2， jQuery的， Kaminari（分页宝石）

所以这是我用来更新网址的代码

jQuery ->
  $(".pagination a[data-remote=true]").on 'click', (e) ->
    e.preventDefault()
    history.pushState {}, '', $(this).attr("href")

在show.js.erb上，更新我使用的内容

$("#reviews").html('<%= escape_javascript render("review") %>')
$("#paginator").html('<%= escape_javascript(paginate(@reviews, :remote => true).to_s) %>');

该节目每次都有效，但第一个脚本只是第一次出现。

如果我在生成的脚本上设置了一个断点，我可以看到脚本第一次被调用时，它可以工作，但之后它永远不会被调用，就好像我猜的那样有一些解除绑定。

Answer 1

使用jquery-ujs，这就是我所做的：

在show.html.erb中：

<div id="content">
  <div class="paginator">
     <%= paginate @mydata, remote: true %>
  </div>

  <div id="mydata">
    <%= render partial: 'mydata' %>
  </div>

  <div class="paginator">
    <%= paginate @mydata, remote: true %>
  </div>
</div>

在show.js.erb中：

$('div#mydata').html('<%= j render partial: 'mydata' %>');
$('div.paginator').html('<%= j(paginate(@mydata, :remote => true).to_s) %>');

在application.js中：

$('div#content').on('click', '.pagination a[data-remote=true]', function() {
    history.pushState(null, '', $(this).attr("href"))
});
$(window).on('popstate', function () {
    var remoteUrl = "<a href='" + document.location.href + "'" + " data-remote='true'></a>"
    $.rails.handleRemote( $(remoteUrl) );
});

Answer 2

尝试：

history.pushState 'data', '', $(this).attr("href")

Answer 3

可能所有.pagination a[data-remote=true]个链接都在#paginator容器中，其内容在show.js.erb中更新。你需要在html替换后用on方法重复绑定或者只是从父容器[read on documentation for details]中释放事件处理程序

jQuery ->
  $("#paginator").on 'click', '.pagination a[data-remote=true]', (e) ->
    e.preventDefault()
    history.pushState {}, '', $(this).attr("href")

jquery history.pushState脚本仅在第一次运行

3 个答案: