Rails 4 TurboLinks 和 jQuery 动态链接运行不佳答案

【问题标题】：Rails 4 TurboLinks and jQuery Dynamic Links Not Playing NiceRails 4 TurboLinks 和 jQuery 动态链接运行不佳
【发布时间】：2013-06-27 12:39:42
【问题描述】：

我正在使用 Rails 4.0 开发一个应用程序，但我遇到了一个问题，即 turbolinks 不能很好地使用我拥有的一些 jQuery 代码。我有一个具有相关 QuoteItems 模型的 Quote 模型。我正在使用 Accepts_nested_attributes_for 和一些 jQuery 来填充订单项表单。

当我点击一个链接到 new_quote_path 时，动态链接不会触发 javascript 代码。当我刷新页面时，表单效果很好。我喜欢 turbolinks，因为它超级快，但不知道如何让它在开发中工作。这是一些代码。

在quotes.js.coffee

jQuery ->
  $('form').on 'click', '.remove_line_items', (event) ->
  $(this).prev('input[type=hidden]').val('1')
  $(this).closest('fieldset').hide()
  event.preventDefault()

$('form').on 'click', '.add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()

报价视图new.html.erb

<%= form_for @quote, :class => "hello" do |f| %>
    <fieldset>
      <p>
        <%= f.label :quote_date, "Date of Quote" %>  <br/>
        <%= f.text_field :quote_date %>
      </p>

      <p>
        <%= f.label :good_through %> <br/>
        <%= f.text_field :good_through %>
      </p>

      <p>
        <%= f.label :quote_number %><br/>
        <%= f.text_field :quote_number %>
      </p>
      <p>
        <%= f.label :customer_id, "Customer" %><br/>
        <%= select(:quote, :customer_id, Customer.all.collect {|c| [ c.fname, c.id ] }, :prompt => "Select Customer") %>
      </p>

      <%= f.fields_for :quote_items do |builder| %>
          <%= render 'quote_item_fields', :f => builder %>
      <% end %>

      <%= link_to_add_fields "Add Line Item", f, :quote_items %>

      <p>
        <%= f.submit %>
      </p>
    </fieldset>
<% end %>

【问题讨论】：

标签： jquery ruby-on-rails turbolinks

【解决方案1】：

我也遇到了同样的问题，如果你想保持 turbolinks 正常工作并且你的动态 jquery 保持打开，试试这个 gem：jquery-turbolinks

希望对你有帮助

【讨论】：

@WiliantoIndrawan 我可以尝试：如果您的域上有绑定，Turbolinks 会影响它们：这是因为您绑定事件的节点不再存在，因为 turbolinks 删除和替换。查看 gem 描述，它解释得很好

【解决方案2】：

一些选项：

1) 关闭 turbolinks - 请参阅 http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

2) 使用新的 page:load turbolinks 事件 - $(document).on('page:load', your_start_function);，请参阅 Rails Jquery doesn't work on other pages - 在你的情况下猜测它会像

$(document).on 'page:load' ->
  $('form').on 'click', '.remove_line_items', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

【讨论】：

您应该使用$(document).on 'ready page:load', -> 来确保在硬刷新和turbolink 页面上都调用ready 函数。

【解决方案3】：

也许会有所帮助：

$(document).on "turbolinks:load", ->
  $('#some_element_id').click ->
     alert "Clicked!"

【讨论】：

尝试了很多东西（以上所有），这终于奏效了。非常感谢。

【解决方案4】：

Turbo 链接使用 AJAX，这意味着任何动态生成的元素都不会分配它们的就绪事件（因为从技术上讲，页面在第一次加载后并未加载）。相反，您需要侦听顶部 DOM 元素 body 或 document，然后为要侦听的动态元素指定选择器：

$('body').on('click', '.remove_line_items', function(e) { ... });

(More Details)

【讨论】：