Androidではdatasetがうまく取れない?
リストアイテムにhtml5の独自データ属性(data-*形式)を設定し、
リスト選択時にdatasetから取得をやってみた。
PC+ChromeやiOSでは取得出来たけど、Android(2.3で確認)ではエラーになる模様。
実装内容は、liタグに独自のデータ属性(data-test="true")を設定。
リストのクリックイベントで、datasetから設定したデータ属性値を取得。
・list.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title> 二郎系一覧 </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <style> /* App custom styles */ /* jQuery Mobileのリスト内の文字を折り返す */ .ui-li .ui-btn-text a.ui-link-inherit { white-space: normal !important; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="list.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <h3> 二郎系一覧 </h3> </div> <div data-role="content"> <ul id="list" data-role="listview" data-divider-theme="a" data-inset="false"> <li data-theme="c"> <a href="" data-test="true">東京都 世田谷区 豪徳寺らーめん りらくしん</a> </li> <li data-theme="c"> <a href="" data-test="false">テスト1</a> </li> <li data-theme="c"> <a href="" data-test="true">テスト2</a> </li> <li data-theme="c"> <a href="" data-test="false">テスト3</a> </li> </ul> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>
・list.js
//ページ1初期表示時のイベント $('#page1').live('pageinit', function() { $('li').click(function(e) { alert(e.target.dataset.test); }); });
デバイスによって動きが違うから動作確認が大変・・・。