JavaScript中的addEventListener与Laravel中的querySelector无法正常工作。

Question

JavaScript中的addEventListener与Laravel中的querySelector无法正常工作。

javascriptlaraveladdeventlistenerqueryselector

3

我正在使用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>

选择器所引用的刀片（转到注释）：

@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

可能的问题是什么？

- dankfasd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Isaac Skelton · Accepted Answer

如果你将这个放在 window.onload 中会发生什么？比如：

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

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

加载文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event