Laravel6でフォームタグ間に設定したボタンにJavascriptを設定したところ動作不良を起こす

前回の質問でlaravel-mixを教えていただき、コンパイルはできました。
ただ、症状は改善しませんでした。

現在、Laravel 6.20.2をWindows10のxampp（PHP 7.4.11）上で動かしています。

やろうとしたことは、ボタンA・ボタンBを用意し、ボタンBは最初は非表示、ボタンAをクリックするとボタンBが表示されるというもの。

出ている現象は、ボタンクリック時に一瞬だけボタンBが表示され、すぐ非表示に戻ってしまうというもの。

調べたところ、<form></form>間にボタンが設置されている場合のみ、症状が起こることがわかりました。

一番シンプルにするために、LaravelのWelcomeページを以下のように変更しました。

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
5    <script>
6        jQuery(function($) {
7            $('#buttonB').hide();
8
9            $('#buttonA').click(function() {
10                $('#buttonB').show();
11            });
12        });
13    </script>
14    </head>
15    <body>
16        <form>
17            <button id="buttonA">ボタンA</button>
18            <button id="buttonB">ボタンB</button>
19        </form>
20    </body>
21</html>

この症状が起こるのは<form></form>間に設置したときのみで、<form></form>を外すとボタンBは表示されたままになります。

インストール時にミスをしたということも特に思い当たらないのですが、このような症状で思い当たる方がいらしたらご教授頂けないでしょうか。

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

回答3件

自分なりに調べてみて、症状に関してLaravelフレームワークの問題ではないことが判明しました。
こちらの質問に関してはクローズさせていただきます。

投稿2020/12/01 01:13

tn3376ams

総合スコア20

自己解決

投稿2020/12/01 00:55

tn3376ams

総合スコア20

html
1<!DOCTYPE html>
2<html>
3    <head>
4    <style>
5        #buttonB { display:none; }
6    </style>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8    <script>
9        jQuery(function($) {
10            $('#buttonB').hide();
11
12            $('#buttonA').click(function() {
13                $('#buttonB').show();
14            });
15        });
16    </script>
17    </head>
18    <body>
19        <form>
20            <button id="buttonA">ボタンA</button>
21            <button id="buttonB">ボタンB</button>
22        </form>
23    </body>
24</html>