Laravel6でjQueryが動作不良を起こす。

「jQueryのpropが正常に作動しない。」の質問をした者です。
jQueryだけの問題ではないようなので、新しく質問をし直します。

以下のサイトを参考にlaravel/uiをインストールしました。
https://qiita.com/n_oshiumi/items/cf00a3f7def92a472a09

インストールはしたもののそれだけでは動作せず、bladeに以下を書き込むことでjQueryは動作しました。

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

以下のサイトを参考に、ajax通信は確認できました。
https://hdtuto.com/article/ajax-post-request-in-laravel-6-example

ただ、簡単なボタン操作で動作不良を起こしています。

Javascript
1jQuery(function($) {
2    $('#buttonA').click(function() {
3        $('#buttonB').hide();
4    });
5});

ボタンAをクリックするとボタンBが消えるはずですが、一瞬だけ消えてすぐに戻ってしまいます。
jQueryが動作した直後に画面の再読み込みが行われて元に戻ってしまうようなイメージです。

以前質問した

Javascript
1jQuery(function($) {
2    $('#search_button').click(function() {
3        $('#send_button').prop('disabled', false);
4    });
5});

も全く同じ動きをします。

jQuery単体の問題かと思っていたのですが、
・laravel/uiをインストールしたこと
・Laravelのbladeとの関連性
なども関連しているのかと思い、改めて質問をし直します。

よろしくお願いします。

yambejp

2020/11/26 03:29

前回もボタンといいつつアンカーだったりするのできちんとソース提示がないかぎり回答はきびしいです

tn3376ams

2020/11/27 04:27

変更して更新ボタンを押したのですが何故か反映されず、今回は解決したのでこれでクローズさせてください。

行動規範の内容に同意します

回答1件

ベストアンサー

変なブログを信じてるから間違える。Laravelを覚えるために必要なのは変なブログを絶対に見ないこと。

前提として必要なのはnode.js/npmのモダンフロントの知識。Laravelはこのくらいみんな知ってるだろうという前提で進むので知らないと使えない。

Laravel6にui:1.xをインストールしたなら
resources/js/bootstrap.jsを見る。
jqueryが読み込まれてるのはここなので<script>で自分で読み込む必要はない。

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

bootstrap.jsはapp.jsから読み込まれている。
これをどうやって使うかというとlaravel-mix(webpack)でビルドして使う。
https://readouble.com/laravel/6.x/ja/mix.html
ビルドしたファイルはpublicに作られるのでこれをviewで読み込む。
uiで作ったならこれも最初から用意されてるので自分で変える必要はあまりない。
mix()にするくらい。

この辺はLaravelとは関係ないフロントの話。
scriptでjqueryを読み込んだりviewに直接JS書いたりやってはいけないことを全部やってるのでかなり基礎からの学習が必要。

投稿2020/11/26 04:04