###前提・実現したいこと
monacaを使用して公式サイトで公開されている「メモ帳アプリ」をベースにテストアプリを開発しています。
なお、当方、他言語での開発経験はありますが、アプリ開発は初めてで、この質問に何のタグを付ければよいかも判断つかないような知識の状態です。
###発生している問題・エラーメッセージ
リストに設定したdata属性がclick時のイベントで取得できない
下記ソースのapp.jsのonShowLinkです。
###該当のソースコード
「~」は省略
■index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> </head> <body></body> </html><!-- TOP Page --> <div data-role="page" id="TopPage"> <header data-role="header" data-position="fixed" data-theme="c"> <h1>Monaca Memo</h1> <a href="#AddPage" data-icon="plus" class="ui-btn-right">Add</a> </header> <section data-role="content"> <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete"> </ul> </section> </div> <!-- Add Memo Page --> ~ <!-- Detail Page --> ~
■app.js
///// Initialize top page
function initTopPage() {
~
var list = getMemoList();
for (var i in list) {
var memo = list[i];
~
$li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
$li.data("id", memo.id);
~
$("#TopListView").prepend($li);
}
~
$("#TopListView").listview("refresh"); // Call refresh after manipulating list
}
///// Move to detail page
function onShowLink() {
var $li = $(this).parent();
var id = $li.data("id");
alert(id); //←■■ここで取得できない!!■■
~
}
///// Delete memo
function onDeleteLink() {
~
var $li = $(this).parent();
var id = $li.data("id"); //←■■ここではできている■■
deleteMemo(id);
~
}
///// Called when app launch
function onReady() {
initTopPage();
$("#SaveBtn").click(onSaveBtn);
$("#TopListView").on("click", "a.show", onShowLink);
$("#TopListView").on("click", "a.delete", onDeleteLink);
}
$(onReady); // on DOMContentLoaded
■memo.js
///// Return list of memo
function getMemoList() {
~
}
~
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/27 05:56
2017/04/27 06:13
2017/04/28 02:11