为啥 onclick 在 Rails4 和 coffeescript 中的 turbolinks 的第二页请求上不起作用？

Posted 2023-03-03

【中文标题】为啥 onclick 在 Rails4 和 coffeescript 中的 turbolinks 的第二页请求上不起作用？

【英文标题】：Why onclick doesn't work on the second page request with turbolinks in Rails4 and coffeescript?为什么 onclick 在 Rails4 和 coffeescript 中的 turbolinks 的第二页请求上不起作用？

【发布时间】：2013-06-12 13:33:54

【问题描述】：

为什么我必须重新加载页面才能使点击回调起作用？

使用 Rails 4.0.0.rc2 我想点击 table-row/table-td 而不是标准链接。 table-row 有一个 css-class，并且当单击该行时，coffee-script 应该加载正确的 url。

下面显示的代码第一次运行良好并重定向到正确的目标。 当我然后单击菜单（使用 turbolink 处理）以显示原始表格时，除非我重新加载表格，否则对任何表格行的点击都不起作用。

我的haml模板看起来像这样

....
%trclass: 'clickable-row', id: 'row-id-1'
  %td Some text
  %td more text
%trclass: 'clickable-row', id: 'row-id-2'
  %td ...
  %td ...

咖啡脚本：

jQuery ->
  $('.clickable-row td').click ->
    target_id = $(this).parent().attr('id').replace /row-id-/,''
    document.location = "/controller_xy/#target_id/edit"

【问题讨论】：

伊维特，谢谢你的提示。我是新来的（作为海报）并更改了标题。

在运行 jQuery 之后是否添加了更多 .clickable-row td 元素？

不，链接只是返回到带有表格的页面。也没有涉及其他 javascipts。

【参考方案1】：

不过，这不是“为什么”问题的答案，但至少是一种解决方法。

工作的咖啡脚本如下所示：

jQuery ->

  $(document).on( 'click', '.clickable-row td', ->
    target_id = $(this).parent().attr('id').replace /row-id-/, ''
    document.location = "/controller_xy/#target_id)/edit"
  )

【参考方案2】：

这里还有另一个更简单的解决方案。

当您使用自 Rails 4 以来默认的 turbolinks 时，还包括 jquery.turbolinks gem。

说明很简单。

在您的 Gemfile 中添加：gem 'jquery-turbolinks' 在您的 javascript 清单中（默认：app/assets/javascripts/application.js.coffee）： 需要 jquery.turbolinks 紧接在 jquery 之后。 在您的脚本之后需要turbolinks。

例子：

#= require jquery
#= require jquery.turbolinks
#= require jquery_ujs

# ... your other scripts here ...

#= require turbolinks

【讨论】：

这在 Rails 5 中已被弃用