Rails 4 TurboLinks và jQuery Liên kết động Không chơi đẹp

Question

Tôi đang phát triển một ứng dụng trong Rails 4.0 và tôi gặp vấn đề với turbolinks không chơi tốt với một số mã jQuery mà tôi có. Tôi có một mô hình Trích dẫn có mô hình QuoteItems có liên quan. Tôi đang sử dụng accept_nested_attributes_for và một số jQuery để điền vào các mẫu mục hàng.

Khi tôi nhấp vào liên kết đưa tôi đến new_quote_path, Liên kết động không kích hoạt mã javascript. Khi tôi làm mới trang, biểu mẫu WORKS GREAT. Tôi thích turbolinks vì nó là siêu nhanh, nhưng không chắc chắn làm thế nào để có được điều này để làm việc trong phát triển. Đây là một số mã.

trong 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() 

giá thực tế xem 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

Tôi đã có cùng một vấn đề, nếu bạn muốn giữ turbolinks làm việc và jquery động của bạn trên, hãy thử đá quý này: jquery-turbolinks

Hy vọng nó giúp

Answer 2

Turbo liên kết sử dụng AJAX có nghĩa là bất kỳ yếu tố tạo động không bao giờ có được sự kiện đã sẵn sàng được giao (vì trang không tải kỹ thuật sau lần tải đầu tiên). Thay vào đó, bạn cần phải lắng nghe những phần tử DOM đầu body hoặc document và sau đó xác định một chọn cho các phần tử năng động để nghe:

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

(MoreDetails)

Answer 3

Một số tùy chọn:

1) tắt turbolinks - xem http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

2) sử dụng sự kiện page:load mới turbolinks cháy - $(document).on('page:load', your_start_function);, xem Rails Jquery doesn't work on other pages - đoán trong trường hợp của bạn nó sẽ là một cái gì đó giống như

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

Answer 4

có lẽ nó sẽ giúp:

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