新たにpageを作成し、そのpageに遷移する方法

現在、jquery mobileを用いて、todoリストアプリを作ろうとしています。そのうえで、「特定箇所をクリックすると、新たにpageを作成し、そのpageに遷移する」という仕掛けが必要となります

そこで、以下のようにコードを組んでみたのですが、うまく機能しません。原因のわかる方がいらっしゃれば、お教え願います。

html
1<body>
2   <!--ホーム画面-->
3   <div data-role="page" id="list-page">
4           <h1>TODO App</h1>
5           <input type="button" id="new_Todo" value="new Todo">
6   </div>
7</body>

javaScript,
1$(function(){
2var new_Todo=document.getElementById("new_Todo");
3 new_Todo.addEventListener('click', function(){
4     var random_id= Math.random()
5     $("#body").append('<div data-role="page" id=' + random_id + '><textarea></textarea></div>');
6     $.mobile.changePage($("#" + random_id + "")); 
7 });
8});

m.ts10806

2017/08/28 01:02 編集

「うまくいかない」だけでは「どのような現象が起きていますか？」と逆質問がくるだけになります。ブラウザの開発ツールでエラーが出ていないか確認し出ていればエラー内容の追記と、「○○のようになってほしいが、××のようになってしまう」といった形で表現をお願いします。https://teratail.com/help/question-tips#questionTips3-4

m.ts10806

2017/08/28 01:00 編集

念のため各プラグインのバージョン（jQueryModileってテーマとかあった気がするので念のためそれも）も環境情報として追記願います。

m.ts10806

2017/08/28 01:30

全く同じ内容の質問を投稿されてますので、片方削除依頼をだされてはいかがでしょうか？　（こちらは私が回答してしまったので、一つ前の質問の方を）

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

回答1件

ざっくり確認しただけですが、
下記、気になるところがあったので修正した上で想定どおりの動作になっているかご確認ください。

$("#body").append(～～) とhtml追加の処理を書いているが、id=bodyの要素は提示のHTMLには存在しない。

$("body")でいいのでは?

var random_id= Math.random()が返す値が小数を含む値となるので、floor()とかで小数を切って整数にすべき。（あと、一応文末なので;つけといてください）

それだけではなくそもそも数字だけのidはNGのはず。（SSのid/class名のルールとそれにまつわるgetElementByIdとquerySelectorの動きの違い）
冒頭に何かしら文字列をつけて"hoge_"+random_idのように適当な半角英字を利用した単語にすべき。たぶん整数だけのIDではchangePage()も要素情報を拾えません。

私の方で上記の対応をして確認した限りでは、id=list-page内が隠れて新たに生成した中身はtextareaだけのpageが表示されました。

投稿2017/08/28 01:18

m.ts10806

総合スコア80850