QuerySelector 在 Rails Webpacker 中不工作

Question

我将以下 JavaScript 加载到 Webpacker 中：

'use strict';

(function() {
  alert("This shows up.");
  var someObject = document.querySelectorAll('[data-toggle="thing"]');
})();

我知道该文件已正确加载到 Webpacker 中并已执行，因为我看到了警报 This shows up.。但是，当我进入控制台时，someObject 是一个空数组，尽管该页面包含具有 data-toggle 属性的对象。

我在控制台中没有看到任何有助于诊断问题的错误。

我猜问题出在页面加载之前执行的脚本？但是，我不确定在将 Rails 6 与 Webpacker 一起使用时如何解决这种情况...

如有任何帮助，我们将不胜感激！

Answer 1

您可能需要将代码包装在 event listener callback that will execute when the DOM is loaded 中。如果您的脚本标记位于 <head> 中，则可能会出现这种情况；它在页面的其余部分加载之前执行。

window.addEventListener('DOMContentLoaded', (_event) => {
  let someObject = document.querySelectorAll('[data-toggle="thing"]');
});

您也不一定需要将代码包装在 IIFE 中（即 (function() { })()，因为 webpack 中的每个文件（通常）都被视为具有自己的函数范围的模块。

QuerySelector Not Working in Rails Webpacker