Rails 4 TurboLinks和jQuery動態鏈接不玩好

我正在Rails 4.0中開發一個應用程序，我遇到了turbolinks與我有一些jQuery代碼不玩的問題。我有一個Quote模型，它有一個相關的QuoteItems模型。我正在使用accepts_nested_attributes_for和一些jQuery來填充訂單項表單。Rails 4 TurboLinks和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 %>

來源

2013-06-30 ctilley79

我有同樣的問題，如果你想保持turbolinks工作，您的動態的jQuery，試試這個寶石：jquery-turbolinks

希望它可以幫助

來源

2013-08-06 07:14:56 thomasstephn

這很好。感謝thomasstephn！ – asprotte

很高興能幫助您 – thomasstephn

這工作。你能解釋爲什麼嗎？ –

渦輪鏈接使用AJAX，這意味着任何動態生成的元素不會獲得分配其準備好事件（因爲頁面在第一次加載之後在技術上不會加載）。相反，你要聽頂端DOM元素body或document然後指定一個選擇的動態元素聽：

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

（More Details）

來源

2013-06-30 04:49:32 Runthral

一些選項：

1）關閉渦輪鏈接 - 參見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()

來源

2013-06-30 04:52:54 house9

你或許應該使用'$（文件）。在「REA dy頁面：load'， - >'以確保在硬刷新和turbolink頁面上都調用ready函數。 –

也許這將幫助：

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

來源

2016-08-31 18:47:30

試了很多東西（全部以上），這終於奏效了。非常感謝。 – crisscross

Rails 4 TurboLinks和jQuery動態鏈接不玩好

回答

相關問題