Q&A
先頭を数字以外に変更しましたが7ページ以降はJavaScrptが検知できませんでした
ページをペラペラめくるアプリケーションを作成しています。
機能の一つに1ページごとにボタンを配置し、ボタンをクリックするとそのページが保存されるという機能があります。
実装方法はページ単位にあるボタンをクリックするとクラス指定で動くJavaScript(JQuery)がAjaxでページを保存するという感じです。
その際、6ページ目までは保存できるのですが、7ページ目以降は保存できなくなりました
7ページ目以降はJavaSciptが検知できていないみたいです。
どのようにすれば7ページ目以降も検知できるようになりますか？
HTML
1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="UTF-8" /> 6<title>BookSample</title> 7<link rel="stylesheet" type="text/css" href="/css/common.css" /> 8<script src="/js/jquery-3.4.1.min.js"></script> 9<script src="/js/turnJS/turn.js"></script> 10<script src="/js/test.js"></script> 11</head> 12<body> 13 <div class="menu"> 14 <a href="/logOut" style="background-color:#FFFF66 ;">ログアウト</a><br/> 15 <a href="/userHome" style="background-color:#FFFF66 ;">ホーム画面へ</a> 16 <h2 ></h2> 17 <form action="/addPage" method="post"> 18 <div id="magazine"> 19 <div class ="book" > 20 <input type="button" class="page" id="1" name="7" value="このページの修正を保存" /> 21 <textarea id="7" class ="bookTextarea" rows="10" cols="80"></textarea> 22 </div> 23 <div class ="book" > 24 <input type="button" class="page" id="2" name="8" value="このページの修正を保存" /> 25 <textarea id="8" class ="bookTextarea" rows="10" cols="80"></textarea> 26 </div> 27 <div class ="book" > 28 <input type="button" class="page" id="3" name="9" value="このページの修正を保存" /> 29 <textarea id="9" class ="bookTextarea" rows="10" cols="80"></textarea> 30 </div> 31 <div class ="book" > 32 <input type="button" class="page" id="4" name="10" value="このページの修正を保存" /> 33 <textarea id="10" class ="bookTextarea" rows="10" cols="80"></textarea> 34 </div> 35 <div class ="book" > 36 <input type="button" class="page" id="5" name="11" value="このページの修正を保存" /> 37 <textarea id="11" class ="bookTextarea" rows="10" cols="80"></textarea> 38 </div> 39 <div class ="book" > 40 <input type="button" class="page" id="6" name="12" value="このページの修正を保存" /> 41 <textarea id="12" class ="bookTextarea" rows="10" cols="80"></textarea> 42 </div> 43 <div class ="book" > 44 <input type="button" class="page" id="7" name="13" value="このページの修正を保存" /> 45 <textarea id="13" class ="bookTextarea" rows="10" cols="80"></textarea> 46 </div> 47 <div class ="book" > 48 <input type="button" class="page" id="8" name="14" value="このページの修正を保存" /> 49 <textarea id="14" class ="bookTextarea" rows="10" cols="80"></textarea> 50 </div> 51 <div class ="book" > 52 <input type="button" class="page" id="9" name="15" value="このページの修正を保存" /> 53 <textarea id="15" class ="bookTextarea" rows="10" cols="80"></textarea> 54 </div> 55 <div class ="book" > 56 <input type="button" class="page" id="10" name="16" value="このページの修正を保存" /> 57 <textarea id="16" class ="bookTextarea" rows="10" cols="80"></textarea> 58 </div> 59 <div class ="book" > 60 <input type="button" class="page" id="11" name="17" value="このページの修正を保存" /> 61 <textarea id="17" class ="bookTextarea" rows="10" cols="80"></textarea> 62 </div> 63 <div class ="book" > 64 <input type="button" class="page" id="12" name="18" value="このページの修正を保存" /> 65 <textarea id="18" class ="bookTextarea" rows="10" cols="80"></textarea> 66 </div> 67 <div class ="book" > 68 <input type="button" class="page" id="13" name="19" value="このページの修正を保存" /> 69 <textarea id="19" class ="bookTextarea" rows="10" cols="80"></textarea> 70 </div> 71 <div class ="book" > 72 <input type="button" class="page" id="14" name="20" value="このページの修正を保存" /> 73 <textarea id="20" class ="bookTextarea" rows="10" cols="80"></textarea> 74 </div> 75 <input type="submit" class="square_btn" value="ページを追加する" /> 76 <input type="hidden" name="bookId" value="6" /> 77 <input type="hidden" name="pageNumber" value="14" /> 78 </div> 79 </form> 80 </div> 81 <script> 82 $(function(){ 83 $('#magazine').turn({ 84 width:1000, 85 height:620, 86 autoCenter: true 87 88 }); 89 }); 90 </script> 91</body> 92</html>
JavaScript
1$(function(){ 2 3 console.log("aaaaa"); 4 5 $(".page").click(function () { 6 if(confirm($(this).attr("id") + 'ページを保存します。よろしいですか？')){ 7 var pageId = "" + $(this).attr("name"); 8 var contents = $("#" + pageId).val(); 9 10// Ajax実行 11 $.ajax({ 12 url : "/updateBook", 13 data: { id : pageId, 14 pageContents : contents}, 15 dataType: "json", 16 type : "post", 17 18 }).done(function(resData) { 19// 成功時の処理 20 confirm('保存しました') 21 }).fail(function(resData) { 22// エラー時の処理 23 confirm('保存に失敗しました') 24 }); 25 } 26 }); 27 28});
ちなみにHTMLはThymeleafで作成しており、サーバサイドはSpringBootで作成しております
補足
先頭文字を数字以外に変更しましたが7ページ目以降は検知しませんでした。
HTML
1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="UTF-8" /> 6<title>BookSample</title> 7<link rel="stylesheet" type="text/css" href="/css/common.css" /> 8<script src="/js/jquery-3.4.1.min.js"></script> 9<script src="/js/turnJS/turn.js"></script> 10<script src="/js/test.js"></script> 11</head> 12<body> 13 <div class="menu"> 14 <a href="/logOut" style="background-color: #FFFF66;">ログアウト</a><br /> 15 <a href="/userHome" style="background-color: #FFFF66;">ホーム画面へ</a> 16 <h2></h2> 17 <form action="/addPage" method="post"> 18 <div id="magazine"> 19 <div class="book"> 20 <input type="button" class="page" id="pNum1" 21 name="pNum7" value="このページの修正を保存" /> 22 <textarea id="pNum7" class="bookTextarea" rows="10" 23 cols="80"></textarea> 24 </div> 25 <div class="book"> 26 <input type="button" class="page" id="pNum2" 27 name="pNum8" value="このページの修正を保存" /> 28 <textarea id="pNum8" class="bookTextarea" rows="10" 29 cols="80"></textarea> 30 </div> 31 <div class="book"> 32 <input type="button" class="page" id="pNum3" 33 name="pNum9" value="このページの修正を保存" /> 34 <textarea id="pNum9" class="bookTextarea" rows="10" 35 cols="80"></textarea> 36 </div> 37 <div class="book"> 38 <input type="button" class="page" id="pNum4" 39 name="pNum10" value="このページの修正を保存" /> 40 <textarea id="pNum10" class="bookTextarea" rows="10" 41 cols="80"></textarea> 42 </div> 43 <div class="book"> 44 <input type="button" class="page" id="pNum5" 45 name="pNum11" value="このページの修正を保存" /> 46 <textarea id="pNum11" class="bookTextarea" rows="10" 47 cols="80"></textarea> 48 </div> 49 <div class="book"> 50 <input type="button" class="page" id="pNum6" 51 name="pNum12" value="このページの修正を保存" /> 52 <textarea id="pNum12" class="bookTextarea" rows="10" 53 cols="80"></textarea> 54 </div> 55 <div class="book"> 56 <input type="button" class="page" id="pNum7" 57 name="pNum13" value="このページの修正を保存" /> 58 <textarea id="pNum13" class="bookTextarea" rows="10" 59 cols="80"></textarea> 60 </div> 61 <div class="book"> 62 <input type="button" class="page" id="pNum8" 63 name="pNum14" value="このページの修正を保存" /> 64 <textarea id="pNum14" class="bookTextarea" rows="10" 65 cols="80"></textarea> 66 </div> 67 <div class="book"> 68 <input type="button" class="page" id="pNum9" 69 name="pNum15" value="このページの修正を保存" /> 70 <textarea id="pNum15" class="bookTextarea" rows="10" 71 cols="80"></textarea> 72 </div> 73 <div class="book"> 74 <input type="button" class="page" id="pNum10" 75 name="pNum16" value="このページの修正を保存" /> 76 <textarea id="pNum16" class="bookTextarea" rows="10" 77 cols="80"></textarea> 78 </div> 79 <div class="book"> 80 <input type="button" class="page" id="pNum11" 81 name="pNum17" value="このページの修正を保存" /> 82 <textarea id="pNum17" class="bookTextarea" rows="10" 83 cols="80"></textarea> 84 </div> 85 <div class="book"> 86 <input type="button" class="page" id="pNum12" 87 name="pNum18" value="このページの修正を保存" /> 88 <textarea id="pNum18" class="bookTextarea" rows="10" 89 cols="80"></textarea> 90 </div> 91 <div class="book"> 92 <input type="button" class="page" id="pNum13" 93 name="pNum19" value="このページの修正を保存" /> 94 <textarea id="pNum19" class="bookTextarea" rows="10" 95 cols="80"></textarea> 96 </div> 97 <div class="book"> 98 <input type="button" class="page" id="pNum14" 99 name="pNum20" value="このページの修正を保存" /> 100 <textarea id="pNum20" class="bookTextarea" rows="10" 101 cols="80"></textarea> 102 </div> 103 <input type="submit" class="square_btn" value="ページを追加する" /> <input 104 type="hidden" name="bookId" value="6" /> <input 105 type="hidden" name="pageNumber" value="14" /> 106 </div> 107 </form> 108 </div> 109 <script> 110 $(function() { 111 $('#magazine').turn({ 112 width : 1000, 113 height : 620, 114 autoCenter : true 115 116 }); 117 }); 118 </script> 119</body> 120</html>
。
回答2件
0
HTMLを見るとtextareaのIDが7から始まっていますが、それが7番目以降のボタンとid被りしはじめているのではないでしょうか？
1ページ内に同じidは1つのみが原則だったと思うのですが。
投稿2019/09/16 06:19
総合スコア610
0
idやclassの先頭文字に数字は使えません。
そのせいで不足の事態が起きている可能性が高いのではないでしょうか？
参考記事
【備忘録】idやclassの先頭文字に数字は使えないけど、使いたいときにやること（使いたい時は、数字をエスケープする）
https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1
投稿2019/09/16 05:33
総合スコア975
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/16 08:17