{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 再贱就再见 的问题《Laravel 5.6 - Do I need to include JQuery or is it》','https://www.manongdao.com/q-631576.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have created a Laravel 5.6 project on my local.
I have <script src="{{ asset('js/app.js') }}" defer></script> in <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>
but it gives me jQuery is not defined error
If I try Bootstrap 4's collapse function, it works fine. Does that mean jQuery is already included?
I have done npm install and npm run dev
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.
Update
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>
and 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
jQuery loaded via your
app.js, which is only loaded once the page is ready because of thedeferattribute in your script tag.Your inline script tag where you call
jQuery(document).readyis loaded as the page renders, therefore executed before theapp.jshas been loaded. Hence the error, since jQuery is not yet loaded at that time.To fix it, simply remove the
deferattribute from the script tag.For more information about the defer attribute: https://www.w3schools.com/tags/att_script_defer.asp