jQuery、webpacker 和 Rails 6 事件监听器

Posted 2023-05-09

【中文标题】jQuery、webpacker 和 Rails 6 事件监听器

【英文标题】：jQuery, webpacker & Rails 6 event listener

【发布时间】：2021-01-19 15:43:45

【问题描述】：

我有一个使用 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，它就可以工作。知道为什么会发生这种情况吗？

【参考方案1】：

您应该首先使用trubolinks:load 事件。该事件在页面第一次加载和每次 turbolink 访问时被调用。

所以packs/customer/form.js 中的代码应该如下所示：

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

【讨论】：

这似乎不起作用，如果我将侦听器放在 application.js 中，代码运行良好，但如果它在包本身中则不会。我想我缺少导入声明或其他东西

我想我明白了。您的form.js 在packs/customer 中，但您输入的<%=javascript_pack_tag 'customerS/form'%> 应该是<%=javascript_pack_tag 'customer/form'%>。