Javascript addEventListener 以某种方式无法在 Laravel 中使用 querySelector-6ren

Javascript addEventListener 以某种方式无法在 Laravel 中使用 querySelector

转载作者：行者123 更新时间：2023-11-30 19:07:21

25

4

我正在使用 Laravel 5.8，我想在我的项目中添加简单的 javascript。它在没有查询选择器的情况下工作正常:

document.addEventListener('click', (e)=>{
    console.log(1);
  });

但是不知何故，当我向其插入 querySelector 时，js 无法正常工作。

document.querySelector('.col-md-8.menus').addEventListener('click', (e)=>{
    console.log(1);
  });

我在我的浏览器控制台上手动测试了它并且事件正确触发。我已确保其他 Blade 模板中没有使用该类名的其他类。我猜它可能与 Laravel 有关，因为我还在虚拟 html 中测试了它并且它在那里正常工作。

app.blade如下:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @include('include.head')
</head>
<body>
  <div id="app" style="min-height:1500px">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm" >
          @include('include.navbar')
      </nav>

      <!--<main class="py-4">-->
          <div class="container" > 
          @yield('content')
          </div>
      <!--</main> -->
  </div>
</body>


<script type="text/javascript">
  document.querySelector('.col-md-8.menus').addEventListener('click', (e)=>{
    console.log(1);
  });

  [...document.querySelectorAll('.nav-tabs a.pr-5.py-3')].forEach(link => link.innerHTML = link.innerHTML.replace('_', ' '));
  [...document.querySelectorAll('[name="kategori"] option')].forEach(option => option.innerHTML = option.innerHTML.replace('_', ' '));

</script>

<footer class="row">
    @include('include.footer')
</footer>
</html>

和选择器引用的 Blade (转到  评论):

@extends('layouts.app')
@section('content')
<div class="container" style="padding:0px">
    <div class="jumbotron" style="background-image:url({{asset('bg.jpg')}})">
        <div class="container my-4">
            <h1 class="display-4">Selamat Datang di Restoran Acin</h1>
        </div>
    </div>
</div>
<div class="container">
    <div class="row justify-content-center">
        <div class="container pt-4" align=center>
            <h1></h1>
        </div>
    </div>  <div class="container my-3">
        <div class="row">
            <div class="col-6">
                <div class="card">
                    <h5 class="card-header">
                            Status
                        </h5>
                    <div class="card-body">
                        <p>Meja Kosong : </p> 
                        <p>Meja Penuh : </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">

            <!-- Menu List -->
            <div class="col-md-8 menus">
                <div class="row">
                    <div class="col-3 pt-4">
                        <div class="card">
                            <div class="card-header">Nama : Nasi Goreng</div>
                            <div class="card-body">Harga :  12000</div>
                        </div>
                    </div>
                    <div class="col-3 pt-4">
                        <div class="card">
                            <div class="card-header">Nama : Nasi Goreng</div>
                            <div class="card-body">Harga :  12000</div>
                        </div>
                    </div>
                    <div class="col-3 pt-4">
                        <div class="card">
                            <div class="card-header">Nama : Nasi Goreng</div>
                            <div class="card-body">Harga :  12000</div>
                        </div>
                    </div>
                    <div class="col-3 pt-4">
                        <div class="card">
                            <div class="card-header">Nama : Nasi Goreng</div>
                            <div class="card-body">Harga :  12000</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order List -->
            <div class="col-md-4 order">
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="d-flex order">
                            <span class="nama-order">Nasi Goreng</span>
                            <span class="harga-order">15000</span>
                            <span class="delete-makanan"><button class="btn btn-primary"></span>
                        </div>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="d-flex order">
                            <span>Nasi Goreng</span>
                            <span>15000</span>
                            <span class="delete-makanan"><button class="btn btn-sm btn-danger">Hapus</button></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="order-template">
            <div class="card mt-3">
                <div class="card-body">
                    <div class="d-flex order">
                        <span>Nasi Goreng</span>
                        <span>15000</span>
                        <span class="delete-makanan"><button class="btn btn-sm btn-danger">Hapus</button></span>
                    </div>
                </div>
            </div>
        </div>
        <contoh-component></contoh-component> <!-- testing vue component-->
    </div>
</div>
@endsection

可能是什么问题？

最佳答案

如果将它放在 window.onload 中会发生什么？例如

window.onload = () => {
    document.querySelector('.col-md-8.menus').addEventListener('click', (e) => {
        // ...
    });
};

发生这种情况的原因可能是因为 DOM 尚未加载，所以 document.querySelector('.col-md-8.menus') 没有找到任何东西。

加载文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

关于Javascript addEventListener 以某种方式无法在 Laravel 中使用 querySelector，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58856520/

25

4

0

文章推荐： c# - 如何在 .aspx 页面中调用 csharp 变量？

文章推荐： c# - 在大文本文件中用\r\n 替换\n

javascript - 您可以在另一个 .addEventListener 中添加一个 .addEventListener 来完成表单吗？
我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。我这样做了，但在第二个 addEventListener 中它给了我这个错误: cannot read proper
javascript - 第二次调用 addEventListener 时，如何摆脱 addEventListener 中使用的旧值？
这是我实际代码的简化版本。有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它
javascript - addEventListener 始终指向所有 addEventListener 元素的最后一个元素或 id 或对象
问题代码 var el = document.getElementById("searchcharm_'"+touch_id+"'"); el.addEventListener('click',
javascript - window.document.addEventListener 与 window.addEventListener
window.document.addEventListener = function(event) {...} window.addEventListener = function(event) {
ajax - XMLHttpRequest.addEventListener 与 XMLHttpRequest.upload.addEventListener
这段代码块有什么区别: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
javascript - document.addEventListener 和 window.addEventListener 的区别？
在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener
javascript - 为什么 document.body.addEventListener 事件在 document.addEventListener 之前运行？
当我运行这段代码时，为什么 .body 事件先触发？ document.addEventListener('click', function() { console.log('The docume
javascript - 'mousedown' 的 addEventListener 与 'click' 的 addEventListener 不同
我将带有循环的 addEventListener 添加到一些 anchor 元素 products 中，如下所示: for(var j=0;j
javascript - for 循环中的 Addeventlistener 有效，但调试器向我抛出一个未捕获的 TypeError : Cannot read property 'addEventListener' of undefined
所以我的代码可以按我想要的方式工作，但是大多数(IE 除外)调试器都会向我抛出此错误: 未捕获类型错误:无法读取未定义的属性“addEventListener” 这是代码: //Get all ele
javascript - 如果将 addEventListener 放在 head 部分而不是 body 中，则 addEventListener 不起作用
我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误: Uncaught TypeError: Cannot read property '
javascript - 在 jest/enzyme 中，如何模拟点击一个元素，其中 eventListener 由 [element].addEventListener(不是 window.addEventListener)绑定(bind)？
在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 Re
Javascript-addEventListener
问候，由于某种原因，当我单击按钮时，我的 -addEventListener 没有执行。任何人都可以帮忙这是我的代码: function elNegro() { alert("Thank Yo
JavaScript .addEventListener
我正在将我的一些代码从 onClick 更改为 addEventListener，因为我已经阅读了各种好处，并且出于关注点分离的目的。然而，我遇到的问题之一是，虽然使用 onClick，我能够调用一个
循环内的Javascript addEventListener
我正在尝试向我在循环中生成的某些元素添加事件监听器。我必须使用 div.lastChild - 虽然在这个例子中它非常愚蠢。但这只是演示: var func = function() {
javascript - addEventListener 无法正常工作
我在将事件监听器添加到 JS 时遇到问题...如果我将按钮与 onclick 属性连接，它会起作用，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunc
javascript - addEventListener 模块模式
我不知道为什么，但是当我点击“按钮”时什么也没有发生... 控制台中没有消息，没有错误。如何解决？ JS var bird = (function(){ let button = doc
JavaScript addEventListener() 外部函数在没有事件的情况下触发
我正在绘制一个方框网格，希望能够单击每个方框并使用 SocketIO 将带有其 ID 的通知发送到服务器 let boxes = document.querySelecto
addEventListener mousemove on 文档准备好
我想是新手问题。以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
Flash:addEventListener 未检测到输入文本框中的粘贴事件
我是 Flash 的新手，我似乎无法完成这个简单的操作。 (我正在使用 ActionScript 3.0) 我在我的编辑器中创建了一个输入文本框。实例名称是“测试”。在我的 Action 编辑器中，我
javascript - addEventListener 字节标记
我有一个像那些标签包含一些内容，我想打开/关闭它们，但仅使用纯 javascript。我已经尝试过使用 document.querySelectorAll

首页

博学

6Ren·AI

商城

Javascript addEventListener 以某种方式无法在 Laravel 中使用 querySelector