Javascript addEventListener不知何故没有在Laravel中与querySelector一起工作
Javascript addEventListener不知何故没有在Laravel中与querySelector一起工作
提问于 2019-11-14 12:12:23
我正在编写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>以及选择器引用的刀片(转到<!--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有什么问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-14 23:56:00
如果您将其放置在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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58856520
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号