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

Question

我正在研究 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 模板中没有其他 class 使用该 class 名称。我的猜测是它可能与 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

可能是什么问题？

Answer 1

如果将它放在 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

Javascript addEventListener somehow not working with querySelector in Laravel

javascript

addeventlistener

laravel

queryselector