JavaScript(jQuery)でのボタンクリックが反応しない

HTML上にあるボタンをクリックすると画面遷移するWebプログラムを作っています。
ですが、jsファイルは検証ツール認識しているものの、中に書いてあるイベントが実行されません。何が不足しているのか(もしくは余計なのか)が分かりません。

html
1<!DOCTYPE html>
2<html>
3 <head>
4  <meta charset = "UTF-8">
5  <meta http-equiv="content-language" content="ja">
6  <meta http-equiv="Content-Script-Type" content="text/javascript">
7  <link rel="stylesheet" type="text/css" href="./bank.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9  
10
11   <title>ペンキマスタ</title>
12 </head>
13 
14 <body>
15 <script type="text/javascript" src="./bank.js"></script> 
16  <h1>一覧編集画面</h1> 
17 <form class = "youso">
18  <button class="new" text-align:center>新規登録</button>
19  
20  <table class = "btable01">
21 
22   <tr><th>色コード</th><th>色名称</th><th>商品番号</th>
23   <th>編集</th><th>削除</th></tr>
24   <tr id=t1><td>001</td><td>赤色</td><td>012345678</td>
25   <td> <button class="update" text-align:center>編集</button></td>
26   <td> <button class="sakujyo" text-align:center>削除</button></td></tr>
27    <tr id=t2><td>002</td><td>青色</td><td>234567890</td>
28   <td> <button class="update" text-align:center>編集</button></td>
29   <td> <button class="sakujyo" text-align:center>削除</button></td></tr>
30    <tr id=t3><td>003</td><td>黄色</td><td>456789012</td>
31   <td> <button class="update" text-align:center>編集</button></td>
32   <td> <button class="sakujyo" text-align:center>削除</button></td></tr>
33  </table>
34 </form>
35 </body>
36</html>

javascript
1
2$('.new').on('click',function(){
3  
4  location.href = 'bankTouroku.html?name='+encodeURIComponent('登録');
5 
6})
7
8$('.update').on('click',function(){
9 
10 location.href = 'bankTouroku.html?name='+encodeURIComponent('編集');
11 
12})

教えてくれる方いたら、教えてください。お願いします。
使用ブラウザ:googlechrome

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

回答3件

text-align:centerってそのまま書いて動いたっけ？（styleに入れないといけないんじゃ？）とか気になる点は幾つもありますが、イベント付与は、「読み込まれている要素」に対して行われるので、jsファイルを読み込んだタイミングで存在しない.newにイベント付与は出来ません。

document ready,document load を考慮した実装をするか、</body>の前にjsを置くなど、「対象の要素が確実に読み込まれているタイミング」で実行させるようにしてください。

投稿2020/07/16 10:14

m.ts10806

総合スコア80850

j-nagnn

2020/07/16 10:30

[javascript] jQuery(document).ready(function(){ jQuery('.new').on('click',function(){ location.href = 'bankTouroku.html?name='+encodeURIComponent('登録'); }) jQuery('.update').on('click',function(){ location.href = 'bankTouroku.html?name='+encodeURIComponent('編集'); }) }) ということでしょうか?

m.ts10806

2020/07/16 10:31

$がjQueryに変わったのがなぜなのか気になりますが、まず、やってみては。

j-nagnn

2020/07/16 10:39

"location.href"では確認できず、"alert"でやってみたら動きが確認できました。

m.ts10806

2020/07/16 11:01

location.hrefが何をしているか分かっていない・・・？

j-nagnn

2020/07/16 11:15

指定したページに遷移ですよね? [location.href = ""]の""の中にファイルのディレクトリパスか、WebサイトのURLを入れると認識しています

m.ts10806

2020/07/16 11:32

その「確認できず」が「何を」確認できなかったのか不明なので困っています。

j-nagnn

2020/07/16 11:57 編集

location.href=" "の" "で指定したurlに遷移することが確認できませんでした。試したコード:location.href = 'https://www.sejuku.net/blog' ; *実在するURLで試しました

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

ベストアンサー

location.hrefの後にreturn falseを入れれば遷移します。
※追記　遷移後のURLの画像添付しますね（編集せずに新規投稿しちゃったのでごめんなさい）

$(document).ready(function () {
    
    $('.new').on('click',function(){
        location.href = 'bankTouroku.html?name='+encodeURIComponent('登録');
        return false;
    });

    $('.update').on('click',function(){
        location.href = 'bankTouroku.html?name='+encodeURIComponent('編集');
        return false;
    });
});

投稿2020/07/17 07:27

編集2020/07/17 08:05

tomoka_murata

総合スコア28

j-nagnn

2020/07/17 07:47

画面が切り替わったのが確認できました。ありがとうございます。ただ、encodeURIComponentの()の中身が文字化けしたのが気がかりでしたが... 回答ありがとうございました。

tomoka_murata

2020/07/17 08:18

遷移後、パラメーターの文字化けは再現しませんでしたが、どのように文字化けしたのかが気になる所です。 IEだとサーバー側でエンコード出来ずに化ける事もあるみたいですけど、chromeだったら普通に行けると思うんですが・・・遷移に関してはお役に立てたようで良かったです。

j-nagnn

2020/07/17 08:46

そうなんですね...。分かりました。見直してみます。ありがとうございました。

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

location.hrefの後にreturn falseを入れれば遷移します。

※追記
遷移後のURLの画像添付しますね。

$(document).ready(function () {
    
    $('.new').on('click',function(){
        location.href = 'bankTouroku.html?name='+encodeURIComponent('登録');
        return false;
    });

    $('.update').on('click',function(){
        location.href = 'bankTouroku.html?name='+encodeURIComponent('編集');
        return false;
    });
});

投稿2020/07/17 07:59

tomoka_murata

総合スコア28