Ссылка на строку данных в таблице не запускается после ответа на format.js

Question

У меня есть индексная страница, которая содержит таблицу HTML, где каждая строка представляет запись. Я использовал data-link и jquery, чтобы перейти на страницу показа записи. На странице также есть форма фильтра. При фильтрации таблицы контроллер отвечает format.js, и щелчок по ссылке на данные не запускается. Щелчок по ссылке на данные отлично работает при первом посещении и при перезагрузке страницы.

application.js

$(document).on('turbolinks:load', function() {
  $("tr[data-link]").click(function() {
    window.location = $(this).data("link");
  })
})

index.html.haml

#companies_table
  = render 'business/companies/partials/companies_table'
= render 'business/companies/partials/filter'

_companies_table.html.haml

......    
%tbody
  - @companies.each do |company|
    %tr.cursor__pointer{"data-link": business_company_path(company)}
      %td
        = company.name

_filter.html.haml

= form_tag(business_companies_path, method: :get, remote: true) do
  .form-group
    %label
      = t(:search_by_name)
    = text_field_tag :search, nil, class: 'form-control', onkeyup: 'submitFilterForms();', autofocus: true, value: params[:search], onfocus: 'this.value = this.value;'

index.js.haml

$("#companies_table").html("#{escape_javascript(render 'business/companies/partials/companies_table')}");

companies_controller.rb

def index
  @companies = Company.filter(params.slice(:company_type, :search, :country)).decorate
  respond_to do |format|
    format.html
    format.js
  end
end

Answer 1

Вы заменяете trs на format.js.

Но вы присоединяете обработчики событий непосредственно к tr, поэтому, когда вы помещаете новые tr в dom, к ним не прикрепляется обработчик событий.

Таким образом, вы должны использовать делегирование событий следующим образом: вы помещаете свой обработчик событий в родительский объект (например, body или несколько div вокруг таблицы), который не изменяется format.js следующим образом:

$( "body" ).on( "click", "tr[data-link]", function() {
     window.location = $(this).data("link");
});

см .: https://learn.jquery.com/events/handling-events/#binding-events-to-elements-that-don-39-t-exist-yet

Другой (менее изящный) способ - добавить обработчик событий в ваш format.js, но это хуже, потому что вы повторяетесь.

index.js.haml

$("#companies_table").html("#{escape_javascript(render 'business/companies/partials/companies_table')}");
$("tr[data-link]").click(function() {
    window.location = $(this).data("link");
})