个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 19:07:21 25 4
gpt4 key购买 nike

我正在使用 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 (转到 <!--Menu List--> 评论):

@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 - 如何从.txt文件中读取整数并将它们存储在C中的整数类型数组中
文章推荐： c# - 如何在 .aspx 页面中调用 csharp 变量？
文章推荐： C 编程在目录中打开目录
文章推荐： c# - 在大文本文件中用\r\n 替换\n
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com