Q&A
機能してないも何もjQuery読み込んでないのでは。
app.jsってどうなってますか？
あと、少し前に同じような質問見た気がするのですけどあちらは？
https://qiita.com/AkiYanagimoto/items/4d409ac978bff3f52a75
上記のサイトにlaravelでオフラインでもjQueryを使用できるようにしたいと思い設定を行っています。
実際にjQueryを動かしたいViewのソースは
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" 6 content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> 7<link rel="stylesheet" href="{{ asset('/css/kodukai.css') }}"> 8 9 <script src="/js/app.js"></script> 10<script type="text/javascript"> 11 12$(function(){ 13 14 $(".openbtn1").click(function () { 15 alert('クリック'); 16 }); 17 }); 18 19</script> 20 21<title>Hello</title> 22</head> 23<body> 24 25 <header> 26 <div class="openbtn1"> 27 28 </div> 29 <h1>テスト</h1> 30 31 </header> 32 33 <footer> 34 <h1>フッター</h1> 35 </footer> 36 37</body> 38</html>
このようにボタンにクラス名「openbtn1」としボタンをクリックするとアラートを表示させたいのですがGoogle Chromeの検証のコンソールにて
index:14 Uncaught ReferenceError: $ is not defined
と表示されています。
jQueryが機能していないみたいなのですが何故でしょうか？
ご教授いただければ幸いです。
追記
app
1require('./bootstrap'); 2
bootstrap
1window._ = require('lodash'); 2 3/** 4 * We'll load the axios HTTP library which allows us to easily issue requests 5 * to our Laravel back-end. This library automatically handles sending the 6 * CSRF token as a header based on the value of the "XSRF" token cookie. 7 */ 8 9window.axios = require('axios'); 10 11window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 12 13/** 14 * Echo exposes an expressive API for subscribing to channels and listening 15 * for events that are broadcast by Laravel. Echo and event broadcasting 16 * allows your team to easily build robust real-time web applications. 17 */ 18 19// import Echo from 'laravel-echo'; 20 21// window.Pusher = require('pusher-js'); 22 23// window.Echo = new Echo({ 24// broadcaster: 'pusher', 25// key: process.env.MIX_PUSHER_APP_KEY, 26// cluster: process.env.MIX_PUSHER_APP_CLUSTER, 27// forceTLS: true 28// }); 29
あちらの方はnpm run devができないエラーの解決方法とさせて質問を分けさせていただきました。
なるほど、で、app.jsってどうなってますか？
app.jsのソースはどこをお見せすればよいかわからないので全て記載しようと思うのですが編集にて更新しようとしてもうまく反映されません。もう少しお待ちくだい。
いずれにしてもjQuery本体が来てないことが原因なので前の質問と同じという認識でした。質問内容もあまり変わっていませんし
申し訳ございません。
前の質問はnpmのコマンドを行なった際に出たエラーの解決方法として質問を処理させていただいので今回のjQueryがうまく動いてくれないという質問とは別なので前の質問の話は他の方が見ても困惑するのでやめていただきたいです。
回答をいただいているのに申し訳ございません。
こちらは回答ではなく質問への追記修正依頼です。
質問者認識はともかく、パッケージやライブラリのコマンドによる導入は、そのライブラリやパッケージが正しく動作するまでが一連であるため「同じ」と書きました。コマンドが通っても導入したいものが動かなくてはそれはできてないのと同じ認識です。
申し訳ございません。
こちらの認識不足でした。
回答1件
0
ベストアンサー
jQueryが機能していないみたいなのですが何故でしょうか？
どこでもjQuery本体（あるいはそれを含むJavaScriptコード）を読み込んでいないからです。
投稿2021/05/17 07:35
編集2021/05/17 07:38
総合スコア146063
js/app.jsはきちんと生成させていますか？
app. jsは作成はされています。
コンソールのエラーは「 $ is not defined」だけですか？
はい。
それ以外は何もエラーが表示されていません。
app.jsのソースコードでjQueryの呼び出しは行いましたか？
（package.jsonに追加した「だけ」では操作として足りないかと思います）
app.jsのソースコードでjQueryの呼び出しを行うとはどういうことでしょうか？
書いてのとおりです。resources/js/app.jsにはどんなコードがありますか？
先ほどapp.jsのソースを追記させていただきました。
requireしているbootstrap.jsの中身はどのようになっていますか？
bootstrap.jsのソースコードを追記させていただきました。
書いてある他のコードと同様に、「window.$ = window.jQuery = require('jquery');」とどちらかのファイルに追記してください。
ありがとうございます。
記載していただいた通りに追記することで解決できました。
あなたの回答
tips
プレビュー
