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

Answer 1

我遇到了同样的问题,如果你想保持turbolink工作和你的动态jquery,试试这个gem:jquery-turbolinks

希望能帮助到你

Answer 2

一些选择:

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

2)使用page:loadturbolinks触发的新事件 - $(document).on('page:load', your_start_function);请参阅Rails Jquery在其他页面上不起作用 - 猜测你的情况会是这样的

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