10

我正在 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 %>
4

4 回答 4

16

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

希望能帮助到你

于 2013-08-06T07:14:56.320 回答
9

一些选项：

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()
于 2013-06-30T04:52:54.217 回答
4

也许它会有所帮助：

$(document).on "turbolinks:load", ->
  $('#some_element_id').click ->
     alert "Clicked!"
于 2016-08-31T18:47:30.170 回答
3

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

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

（更多 详情）

于 2013-06-30T04:49:32.423 回答