質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

JQueryのクラス指定で7個目以降のボタンが反応しない

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 364

score 19

ページをペラペラめくるアプリケーションを作成しています。
機能の一つに1ページごとにボタンを配置し、ボタンをクリックするとそのページが保存されるという機能があります。

実装方法はページ単位にあるボタンをクリックするとクラス指定で動くJavaScript(JQuery)がAjaxでページを保存するという感じです。

その際、6ページ目までは保存できるのですが、7ページ目以降は保存できなくなりました
7ページ目以降はJavaSciptが検知できていないみたいです。
どのようにすれば7ページ目以降も検知できるようになりますか?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BookSample</title>
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/turnJS/turn.js"></script>
<script src="/js/test.js"></script>
</head>
<body>
    <div class="menu">
        <a href="/logOut" style="background-color:#FFFF66 ;">ログアウト</a><br/>
        <a href="/userHome" style="background-color:#FFFF66 ;">ホーム画面へ</a>
        <h2 ></h2>
    <form action="/addPage" method="post">
    <div id="magazine">
        <div class ="book" >
            <input type="button" class="page" id="1" name="7" value="このページの修正を保存" />
            <textarea id="7" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="2" name="8" value="このページの修正を保存" />
            <textarea id="8" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="3" name="9" value="このページの修正を保存" />
            <textarea id="9" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="4" name="10" value="このページの修正を保存" />
            <textarea id="10" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="5" name="11" value="このページの修正を保存" />
            <textarea id="11" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="6" name="12" value="このページの修正を保存" />
            <textarea id="12" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="7" name="13" value="このページの修正を保存" />
            <textarea id="13" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="8" name="14" value="このページの修正を保存" />
            <textarea id="14" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="9" name="15" value="このページの修正を保存" />
            <textarea id="15" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="10" name="16" value="このページの修正を保存" />
            <textarea id="16" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="11" name="17" value="このページの修正を保存" />
            <textarea id="17" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="12" name="18" value="このページの修正を保存" />
            <textarea id="18" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="13" name="19" value="このページの修正を保存" />
            <textarea id="19" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
        <div class ="book" >
            <input type="button" class="page" id="14" name="20" value="このページの修正を保存" />
            <textarea id="20" class ="bookTextarea" rows="10" cols="80"></textarea>
        </div>
            <input type="submit" class="square_btn"  value="ページを追加する" />
            <input type="hidden" name="bookId" value="6" />
            <input type="hidden" name="pageNumber" value="14"  />
    </div>
    </form>
    </div>
    <script>
    $(function(){
         $('#magazine').turn({
         width:1000,
         height:620,
         autoCenter: true

         });
        });
    </script>
</body>
</html>
$(function(){

    console.log("aaaaa");

    $(".page").click(function () {
        if(confirm($(this).attr("id") + 'ページを保存します。よろしいですか?')){
            var pageId = "" + $(this).attr("name");
            var contents = $("#" + pageId).val();

//            Ajax実行
            $.ajax({
                url : "/updateBook",
                data: { id :  pageId,
                        pageContents : contents},
                dataType: "json",
                type : "post",

            }).done(function(resData) {
//                成功時の処理
                confirm('保存しました')
            }).fail(function(resData) {
//                エラー時の処理
                confirm('保存に失敗しました')
            });
        }
    });

});


ちなみにHTMLはThymeleafで作成しており、サーバサイドはSpringBootで作成しております

補足
先頭文字を数字以外に変更しましたが7ページ目以降は検知しませんでした。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BookSample</title>
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/turnJS/turn.js"></script>
<script src="/js/test.js"></script>
</head>
<body>
    <div class="menu">
        <a href="/logOut" style="background-color: #FFFF66;">ログアウト</a><br />
        <a href="/userHome" style="background-color: #FFFF66;">ホーム画面へ</a>
        <h2></h2>
        <form action="/addPage" method="post">
            <div id="magazine">
                <div class="book">
                    <input type="button" class="page" id="pNum1"
                        name="pNum7" value="このページの修正を保存" />
                    <textarea id="pNum7" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum2"
                        name="pNum8" value="このページの修正を保存" />
                    <textarea id="pNum8" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum3"
                        name="pNum9" value="このページの修正を保存" />
                    <textarea id="pNum9" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum4"
                        name="pNum10" value="このページの修正を保存" />
                    <textarea id="pNum10" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum5"
                        name="pNum11" value="このページの修正を保存" />
                    <textarea id="pNum11" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum6"
                        name="pNum12" value="このページの修正を保存" />
                    <textarea id="pNum12" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum7"
                        name="pNum13" value="このページの修正を保存" />
                    <textarea id="pNum13" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum8"
                        name="pNum14" value="このページの修正を保存" />
                    <textarea id="pNum14" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum9"
                        name="pNum15" value="このページの修正を保存" />
                    <textarea id="pNum15" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum10"
                        name="pNum16" value="このページの修正を保存" />
                    <textarea id="pNum16" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum11"
                        name="pNum17" value="このページの修正を保存" />
                    <textarea id="pNum17" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum12"
                        name="pNum18" value="このページの修正を保存" />
                    <textarea id="pNum18" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum13"
                        name="pNum19" value="このページの修正を保存" />
                    <textarea id="pNum19" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <div class="book">
                    <input type="button" class="page" id="pNum14"
                        name="pNum20" value="このページの修正を保存" />
                    <textarea id="pNum20" class="bookTextarea" rows="10"
                        cols="80"></textarea>
                </div>
                <input type="submit" class="square_btn" value="ページを追加する" /> <input
                    type="hidden" name="bookId" value="6" /> <input
                    type="hidden" name="pageNumber" value="14" />
            </div>
        </form>
    </div>
    <script>
        $(function() {
            $('#magazine').turn({
                width : 1000,
                height : 620,
                autoCenter : true

            });
        });
    </script>
</body>
</html>


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

HTMLを見るとtextareaのIDが7から始まっていますが、それが7番目以降のボタンとid被りしはじめているのではないでしょうか?

1ページ内に同じidは1つのみが原則だったと思うのですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/16 17:17

    今、思ったのですが
    こんな中途半端に7からtextareaのidが始まっているということは
    もしかして7ページ以降は画面の描画後になんらかのアクションで追加しているのでしょうか?

    もしそうであれば、後から追加分は
    $(".page").click(function(){…})
    ではイベントを拾えなかったと思います

    $(".page").on("click",function(){…})
    にすれば反応するはずですがどうでしょうか。

    キャンセル

+1

idやclassの先頭文字に数字は使えません。
そのせいで不足の事態が起きている可能性が高いのではないでしょうか?

参考記事
【備忘録】idやclassの先頭文字に数字は使えないけど、使いたいときにやること(使いたい時は、数字をエスケープする)
https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/16 15:06

    先頭を数字以外に変更しましたが7ページ以降はJavaScrptが検知できませんでした

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る