jQuery、webpacker 和 Rails 6 事件监听器

Question

我有一个使用 SimpleForm 构建的 remote:true 表单，它呈现一个 JS 文件 create.js.erb

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

同时我在 packs/customer/form.js 中有一个监听器，它包含在 erb 视图中使用

<%=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");
  });
});