未通过面包屑链接附加的 JQuery 事件处理程序答案

【问题标题】：JQuery event handlers not attached via breadcrumbs links未通过面包屑链接附加的 JQuery 事件处理程序
【发布时间】：2014-08-03 14:13:22
【问题描述】：

在我的 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 等形式的自定义路由将不同的 cmets 组呈现到表中，只要我直接在浏览器地址栏中请求视图，一切都会顺利进行。

但我在页面上也有通过link_to helpers 生成的面包屑链接：

<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>

当我单击这些链接中的任何一个以获取视图时，页面已正确加载，但检查显示没有 单击处理程序 附加到 <tbody> 元素。（如果我重新加载页面，它会附上。）

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

【问题讨论】：

我认为我们遇到了同样的问题。 Rails 有一个名为“Turbolinks”的“功能”，它将 AJAX 加载页面（更快），但这意味着由 AJAX 插入的新 DOM 元素不会附加事件处理程序。我们的解决方案是关闭它们。否则，您将不得不监听 ajax 事件并重新应用事件处理程序。
感谢您的回复。我实际上已经看过您之前的帖子，但由于我的经验不足，我未能在此处提及它。

标签： javascript jquery ruby-on-rails ruby-on-rails-4 coffeescript

【解决方案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

【讨论】：

非常感谢您不厌其烦地回复。抱歉，这是一个已知问题——新玩家的陷阱。我已经跳过了指南中的简短提及，它又回来咬我。