繁体   English   中英

QuerySelector 在 Rails Webpacker 中不起作用

[英]QuerySelector Not Working in Rails Webpacker

我将以下 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 时,我不确定如何解决这种情况......

任何帮助将不胜感激!

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

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

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

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM