Rails 6 + Webpack document.addEventListener 不工作答案

【问题标题】：Rails 6 + Webpack document.addEventListener is not WorkingRails 6 + Webpack document.addEventListener 不工作
【发布时间】：2020-10-06 13:06:40
【问题描述】：

我的代码如下

// app/javascript/packs/application.js
import 'select2';
document.addEventListener(
  'turbolinks:load', function() {
    jQuery('#post_category_ids').select2();
  } 
);

// app/javascript/packs/quill.js
import Quill from 'quill';
document.addEventListener(
  'turbolinks:load', function() {
    var quill = new Quill('#editor', {
      modules: {
        toolbar: true
      },
      theme: 'snow'
    });

    quill.on('text-change', function(delta, oldDelta, source) {
      $('#editorable').val(quill.container.firstChild.innerHTML);
    });
  }
);

quill.js 中的 addEventListener 没有触发。我可以让羽毛笔编辑器只在硬重新加载时工作。如果我将所有代码放在 application.js 中的 addEvenlistener 中，那么 quill 加载就可以了，无需硬刷新。

如何解决？

【问题讨论】：

标签： javascript ruby-on-rails webpack

【解决方案1】：

解决了这个问题。我在 _form.html.erb 中使用了 javascript_pack_tag 助手。似乎 'turbolinks:load' 在那里不可用。我将 javascript_pack_tag 助手移动到 application.html.erb

# app/views/layouts/application.html.erb
<%= javascript_pack_tag 'quill', 'data-turbolinks-track': 'reload' if action_name == "edit" %>

...一切都按预期进行。

【讨论】：