jQuery、webpacker 和 Rails 6 事件监听器

Question

I have a remote:true form built using SimpleForm that renders a JS file create.js.erb

// customers/create.js.erb
...
  $('#new_customer').trigger('customer:callback');
...

Meanwhile I have a listener in packs/customer/form.js that is included in the erb view using

<%=javascript_pack_tag 'customers/form'%>

// packs/customers/form.js
$(document).on('customer:callback', '#new_customer', function(data) {
  alert('Success');
});

The event listener is never triggered, however if I move the event listener to javascript/application.js it works. Any idea why this might be happening?

Answer 1

You should first use the trubolinks:load event. This event is called the first time the page loads and every time on a turbolink visit.

So your code in packs/customer/form.js you should look like this:

$(document).on("turbolinks:load", function () {
  $("#new_customer").on("customer:callback", function(data){
    alert("Success");
  });
});