Javascript addEventListener 不知何故无法与 Laravel 中的 querySelector 一起使用
[英]Javascript addEventListener somehow not working with querySelector in Laravel
问题描述
I'm working on Laravel 5.8 and i want to add simple javascript inside my project.
我正在研究 Laravel 5.8，我想在我的项目中添加简单的 javascript。 It works fine without the query selector:没有查询选择器它工作正常：
document.addEventListener('click', (e)=>{
console.log(1);
});
But somehow the js doesn't work when I insert a querySelector to it.但不知何故，当我向其中插入 querySelector 时，js 不起作用。
document.querySelector('.col-md-8.menus').addEventListener('click', (e)=>{
console.log(1);
});
I tested it manually on my browser console and the event fires properly.我在浏览器控制台上手动测试了它，并且事件正确触发。 I've made sure there are no other classes in other blade templates using that class name.我已确保使用该 class 名称的其他刀片模板中没有其他类。 My guess is it probably has something to do with Laravel since I also tested it in a dummy html and it's working properly there.我的猜测是它可能与 Laravel 有关，因为我还在虚拟 html 中对其进行了测试，并且它在那里正常工作。
The app.blade is as follows: 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>
and the blade where the selector referenced to (go to <!--Menu List--> comment):以及选择器引用的刀片（转到<!--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
What could be the problem?可能是什么问题呢？
1 个解决方案
解决方案1
1 已采纳 2019-11-14 23:56:00
What happens if you place this inside of a window.onload?如果将它放在 window.onload 中会发生什么？ Eg例如
window.onload = () => {
document.querySelector('.col-md-8.menus').addEventListener('click', (e) => {
// ...
});
};
The reason why this may be happening is because the DOM hasn't been loaded yet so document.querySelector('.col-md-8.menus') isn't finding anything.发生这种情况的原因是 DOM 尚未加载，因此document.querySelector('.col-md-8.menus')没有找到任何东西。
Onload Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event加载文档： https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.