JQueryMobileで引っかかったのでメモ。ボタンを押してページ遷移と同時にLocalStorageに保存

やってみたこと

• html

<a href="#menu1" data-role="button" data-icon="arrow-r" data-iconpos="right" id="btn1" >Yes</a><br>
<a href="#menu2" data-role="button" data-icon="arrow-r" data-iconpos="right" id="btn2" >No</a>

• js

function onReady(){
    $("#btn1").click(writeData("test","true"));
    $("#btn1").click(writeData("test","false"));
}

function writeData(key,value){
    window.localStorage.setItem(key, value);
    console.log("write "+key+value);
}

$(onReady);

で、ログを見ると htmlが読み込まれた瞬間にログに

write testtrue

write testfalse

と出力されました。

ならばと、jsを

function onReady(){
    $("#btn1").live("click",writeData("test","true"));
    $("#btn1").live("click",writeData("test","false"));
}

に変更。

意味なかった…

ここで悩むこと半日

苦し紛れに行った手段

• html

<a data-role="button" data-icon="arrow-r" data-iconpos="right" id="btn1">Yes</a><br>
<a data-role="button" data-icon="arrow-r" data-iconpos="right" id="btn2">No</a>

• js

function onReady(){
    $("#btn1").click(data1());
    $("#btn1").click(data2());
}

function data1(){
    writeData("test","true");
    $.mobile.changePage("#menu1");
}

function data2(){
    writeData("test","false");
    $.mobile.changePage("#menu2");
}

なぜか通る…

ということで、結論としては

• a hrefではなく、移動は$.mobile.changePage()で指定
• クリックを取得してそのまま書き込みでは無く、関数を一個噛ませる

という、自分でもよくわからない方法で解決されました。 MonacaのJQMで試したので、最新のJQMなら普通に動くのかなぁ…?

ということで、もしかしたらMonacaでアプリ作ってる人向けかもしれないです。