jQuery、webpacker 和 Rails 6 事件監聽器

Question

我有一個使用 SimpleForm 構建的 remote:true 表單，它呈現一個 JS 文件create.js.erb

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

同時，我在 erb 視圖中包含的 packs/customer/form.js 中有一個監聽器，使用

<%=javascript_pack_tag 'customers/form'%>

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

事件偵聽器永遠不會被觸發，但是如果我將事件偵聽器移動到 javascript/application.js 它可以工作。 知道為什么會發生這種情況嗎？

Answer 1

您應該首先使用trubolinks:load事件。 這個事件在頁面第一次加載和每次訪問 turbolink 時被調用。

所以你在packs/customer/form.js代碼應該是這樣的：

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