QuerySelector 在 Rails Webpacker 中不起作用

Question

我将以下 JavaScript 加载到 Webpacker 中：

'use strict';

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

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

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

我猜这个问题涉及在页面加载之前执行的脚本？ 但是，当使用带有 Webpacker 的 Rails 6 时，我不确定如何解决这种情况......

任何帮助将不胜感激！

Answer 1

您可能需要将代码包装在事件侦听器回调中，该回调将在 DOM 加载时执行。 如果您的脚本标签位于<head>中，则可能是这种情况； 它在页面的 rest 加载之前执行。

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

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