岩手からこんにちは ☆彡 perl とかウェブ系なブログ

はてなダイアリーからひっこしましたよ http://d.hatena.ne.jp/rosiro

jquery mobileでアップロード後ページが変わっちゃうとか

jquery mobileでは

<div data-role="page" id="hoge">

ajax enable(デフォルト)の場合data-role="page"の中身が変わる、なのでidが重複してしまう場合にページが移動してしまうなんかの動作になる。 けっこうはまるポイントではあるんだけど、何も考えずにidを書いていくとはまる事がある。

勘違いかもしれないけどidが重複していないのに、ajaxでファイルをアップロードしたりとかのあと、ページが飛んでしまうことがある。 で、原因がよくわからなかったんだけど、

$(document).delegate('#datarole_smart_post', 'pageshow', function(){
...ここにいれちゃえ
}

data-role="page" にidを指定して pageshowつまりページ表示時に発火するようにjavascriptなんかを書き込んでみたところ、問題なく動作するようになった。

jquery mobileの場合複雑な動作をさせようとすると意図しない動作になってしまう事があって、これはjquery mobileの動作をよく理解しないからなんだろうなと考えるようになった。 jquery mobileではdata-role=page以外の部分は共有されているのがはまるポイントなんだろうと思います。 jquery mobileやphonegapのせいにしてしまう時は、よくよくドキュメントを読んでみたり、信頼できるブログなどを見るすることをお勧めします。

結構jquery mobileはお手軽に動くだけに、jquery mobile関連のブログ記事は見つかるけど、逆にありふれてて本当に信頼できる情報なのかどうかわからない場合もあるような気がします。