Laravel 5.6-我需要包含JQuery还是已经包含在app.js中? [英] Laravel 5.6 - Do I need to include JQuery or is it already included in the app.js?
问题描述
我已经在本地创建了Laravel 5.6项目.
I have created a Laravel 5.6 project on my local.
我在<head>
在其中一种视图中，我尝试了
In one of the views, I tried
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#ddtype" ).change(function() {
alert( "Handler for .change() called." );
});
});
</script>
但是它给了我jQuery is not defined错误
如果我尝试使用Bootstrap 4的折叠功能，则可以正常运行.这是否意味着已经包含了jQuery?
If I try Bootstrap 4's collapse function, it works fine. Does that mean jQuery is already included?
我已经完成了npm install和npm run dev
我的resources/js/app.js需要bootstrap.js，其外观如下(不是完整代码，但前几行)
My resources/js/app.js requires bootstrap.js which looks like (not full code but top few lines) as below
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
请告知.我已经检查了不同的浏览器，以确保没有缓存问题等.
Please advise. I have checked in different browsers to make sure no cache issues etc.
更新
我的layouts/app.blade.php结构是这样的-
My layouts/app.blade.php structure is like this -
<html>
<head>
....
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
....
</head>
<body>
<div id="app">
@include('layouts.nav')
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
和myview.blade.php
@extends('layouts.app')
@section('content')
.....
.....
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#ddtype" ).change(function() {
alert( "Handler for .change() called." );
});
});
</script>
@endsection
推荐答案
通过app.js加载的jQuery，由于脚本标记中的defer属性，仅在页面准备就绪后才加载jQuery.
jQuery loaded via your app.js, which is only loaded once the page is ready because of the defer attribute in your script tag.
您调用jQuery(document).ready的内嵌脚本标记将在页面呈现时加载，因此在加载app.js之前执行.因此出现错误，因为当时尚未加载jQuery.
Your inline script tag where you call jQuery(document).ready is loaded as the page renders, therefore executed before the app.js has been loaded. Hence the error, since jQuery is not yet loaded at that time.
要修复此问题，只需从脚本标记中删除defer属性.
To fix it, simply remove the defer attribute from the script tag.
defer属性是一个布尔属性.
The defer attribute is a boolean attribute.
如果存在，它指定在页面完成解析后执行脚本.
When present, it specifies that the script is executed when the page has finished parsing.
有关defer属性的更多信息: https://www.w3schools.com/tags/att_script_defer.asp
For more information about the defer attribute: https://www.w3schools.com/tags/att_script_defer.asp
这篇关于Laravel 5.6-我需要包含JQuery还是已经包含在app.js中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
