Rails 4 TurboLinks和jQuery动态链接不兼容

Question

我正在开发一个基于Rails 4.0的应用程序，但遇到一个问题——turbolinks与我的一些jQuery代码不兼容。我有一个Quote模型，它有一个相关的QuoteItems模型。我使用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 %>

- ctilley79

Answer 1

我遇到了相同的问题，如果你想继续使用turbolinks并且保持动态jquery的同时，可以尝试使用这个宝石库：jquery-turbolinks希望能对你有所帮助。

- thomasstephn

---

@WiliantoIndrawan 我可以试一下：如果你的域上有绑定，Turbolinks 将会影响它们：这是因为你绑定事件的节点不再存在，因为 turbolinks 会移除并替换它们。请查看 gem 描述，它解释得非常清楚。 - thomasstephn

Answer 2

一些选项：

1）关闭Turbolinks - 参见http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

2）使用Turbolinks触发的新page:load事件 - $(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()

- house9

---

建议您使用 $(document).on 'ready page:load', ->，以确保在页面硬刷新和Turbolink页面中都调用ready函数。 - Christian

Answer 3

也许这会有所帮助：

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

- Ihor Khomiak

---

尝试了很多方法（以上全部），最终这个方法起作用了。非常感谢。 - crisscross

Answer 4

Turbo Links使用AJAX，这意味着任何动态生成的元素都不会被分配其就绪事件（因为页面在第一次加载后并没有真正加载）。相反，您需要监听顶级DOM元素body或document，然后指定要监听的动态元素的选择器： $('body').on('click', '.remove_line_items', function(e) { ... }); （更多 详情）

- Runthral