jquery - 使用 Turbolinks，jQuery 停止工作，直到硬刷新

Question

借助相关的 RailsCast 视频，我实现了动态选择菜单。它运行良好，但现在我必须刷新我的网页，以便我的 .coffee 脚本中编写的 JQuery 代码可以工作。

我在互联网上读到，使用 javascript 并编写 $(document).ready(function()) 的人必须更改 $(document) 中的这部分代码。绑定(bind)('pageinit')。

问题是我不知道如何使其适应我的 .coffee 文件。

我还阅读了有关使用 PJAX 的内容，但 Turbolinks 应该可以完成相同的工作，只是 Turbolinks 可能会发生这种问题。

我的 Turbolink gem 位于我的 GemFile 中，并且在我的 application.js 文件中是必需的。

我应该写什么，这样我就不必刷新网页就可以让 JQuery 代码直接工作？

这是我的 .coffee 文件中的代码:

jQuery ->
  $('#test_contrat_id').parent().hide()
  contrats = $('#test_contrat_id').html()

  $('#test_employe_id').change ->
    employe = $('#test_employe_id :selected').text()
    escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
    if options
      $('#test_contrat_id').html(options)
      $('#test_contrat_id').parent().show()
    else
      $('#test_contrat_id').empty()
      $('#test_contrat_id').parent().hide()

这是我的表单中编写的代码:

<div class="field">
  <%= f.label :employe_id %><br>
  <%= f.collection_select :employe_id, Employe.order(:nom_employe), :id, :nom_employe, include_blank: true %>
</div>
<div class="field">
  <%= f.label :contrat_id %><br>
  <%= f.grouped_collection_select :contrat_id, Employe.order(:nom_employe), :contrats, :nom_employe, :id, :nom_contrat, include_blank: true%>
</div>

Answer 1

您不必像其他答案状态那样使用jquery.turbolinks。您只需等待运行 JavaScript，直到 Turbolinks 触发 page:load 事件。

请参阅帖子底部以了解 Turbolinks 5 的更新

$(document).on 'ready page:load', ->
  # granted I don't know the context here, but instead of using javascript to hide something on DOM load, I would use CSS. Look below for that solution.
  $('#test_contrat_id').parent().hide()


$(document).on 'change', '#test_employe_id', (e) ->
  contrats = $('#test_contrat_id').html()
  employe = $('#test_employe_id :selected').text()
  escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
  options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
  if options
    $('#test_contrat_id').html(options)
    $('#test_contrat_id').parent().show()
  else
    $('#test_contrat_id').empty()
    $('#test_contrat_id').parentemploye

<小时/>

对于上面的 CSS 注释...

# css file
.hidden {
  display: none !important;
  visibility: hidden !important;
}

# add the class .hidden to that element in your view.

# your CoffeeScript will now be
$(document).on 'change', '#test_employe_id', (e) ->
  contrats = $('#test_contrat_id').html()
  employe = $('#test_employe_id :selected').text()
  escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
  options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
  if options
    $('#test_contrat_id').html(options)
    $('#test_contrat_id').parent().removeClass('hidden')
  else
    $('#test_contrat_id').empty()
    $('#test_contrat_id').parent().addClass('hidden')

This GitHub thread关于使用 .hide() 和 .show() 的内容非常有趣，值得您阅读。

<小时/>

Turbolinks 5

Turbolinks 5 添加了自己的事件监听器，因此您不再需要使用 ready page:load。

$(document).on 'turbolinks:load', ->