Question

在我的Rails 4.1应用程序中，我使用JQuery-ujs更新comments#index视图中表格中的单元格。所以我的comments.js.coffee文件中有

jQuery ->
    $('tbody').on 'click', '.btn-info', ->
      $(this).closest('tr').children('td').eq(4).attr("id", "target")

和相应的update.js.erb文件

$('#target').html("<%=j @comment.state.humanize %>").removeAttr("id")

视图通过表单/comments/pending，/comments/confirmed等自定义路由将不同的注释组呈现到表中，只要我直接在浏览器地址栏中请求视图，这一切都很顺利。

但我在页面上也有通过link_to助手生成的痕迹链接：

<ol class="breadcrumb">
   <li class="active">
      <a href="/comments/pending">pending</a>
   </li>
   <li>
      <a href="/comments/confirmed">confirmed</a>
   </li>
   <li>
      <a href="/comments/notable">notable</a>
  </li>
  <li>
      <a href="/comments/eminent">eminent</a>
  </li>
</ol>

当我点击其中任何一个链接获取视图时，页面已正确加载，但检查显示<{1}}元素未附加单击处理程序。（如果我重新加载页面，它会被附加。）

如何确保始终附加点击处理程序？

Answer 1

这是因为turbolinks而发生的。如果您查看铁路指南，请说明：

Turbolinks will make an Ajax request for the page, parse the response, and replace the entire <body> of the page with the <body> of the response。你猜jquery代码将在头脑中，因此点击链接时不会加载。

问题的解决方案是将jquery代码包装在函数中，然后在页面加载上调用该函数，如：

$(document).ready(your_function);
$(document).on('page:load', your_function);

或

您可以使用jquery-turbolinks gem将Rails Turbolink事件绑定到document.ready事件，这样您就可以按照常规方式编写jQuery。有关详细信息，请查看我的回答here

JQuery事件处理程序没有通过breadcrumbs链接附加

1 个答案: