Javascript addEventListener在Laravel中不知何故无法使用querySelector_Javascript_Laravel_Addeventlistener_Queryselector

Javascript addEventListener在Laravel中不知何故无法使用querySelector

javascript laravel

Javascript addEventListener在Laravel中不知何故无法使用querySelector,javascript,laravel,addeventlistener,queryselector,Javascript,Laravel,Addeventlistener,Queryselector,我正在开发Laravel5.8，我想在我的项目中添加简单的javascript。如果没有查询选择器，它可以正常工作： document.addEventListener('click', (e)=>{ console.log(1); }); 但不知何故，当我向js插入querySelector时，js不起作用 document.querySelector('.col-md-8.menus').addEventListener('click', (e)=>{ co

我正在开发Laravel5.8，我想在我的项目中添加简单的javascript。如果没有查询选择器，它可以正常工作：

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

但不知何故，当我向js插入querySelector时，js不起作用

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

我在浏览器控制台上手动测试了它，事件正确触发。我已经确保在其他刀片模板中没有使用该类名的其他类。我猜它可能与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>


@include（'include.head'）
@include（'include.navbar'）
@产量（‘含量’）
document.querySelector（'.col-md-8.menus'）.addEventListener（'click'，（e）=>{
控制台日志（1）；
});
[…document.queryselectoral（'.nav tabs a.pr-5.py-3'）].forEach（link=>link.innerHTML=link.innerHTML.replace（''u'，''））；
[…document.querySelectorAll（'[name=“kategori”]option'）].forEach（option=>option.innerHTML=option.innerHTML.replace（''u'，''）；
@include（'include.footer'）

以及选择器引用的刀片（转到

注释）：

@extends（'layouts.app'））
@节（“内容”）
大唐大酒店
地位
Meja Kosong:
Meja Penuh：
娜玛：纳西·戈伦
哈尔加：12000
娜玛：纳西·戈伦
哈尔加：12000
娜玛：纳西·戈伦
哈尔加：12000
娜玛：纳西·戈伦
哈尔加：12000
纳西戈伦
15000
纳西戈伦
15000
哈布斯
纳西戈伦
15000
哈布斯
@端部

有什么问题吗

如果将此文件放在窗口内会发生什么情况。onload？例如

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

之所以会发生这种情况，是因为DOM尚未加载，所以

document.querySelector（'.col-md-8.menus'）

找不到任何内容

Onload Docs:

是的，DOM没有完全加载，这是我不知道的。你的解决方案解决了这个问题。谢谢

@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