jQuery Mobileを使う場合、HTML内のidに対してセレクタが期待の動作をしない。

2011/11/24

jQuery Mobileでは、ハイパーリンククリック時などのページの遷移時、HTMLを読み込み直すわけではなく、

AJAXでリンク先のデータを取得し、data-role=“page"部分を現在のDOMの一部に挿入し、

その部分を表示する手法をとっている。

そのため、違うページ中に同じidを持つ要素があると、1つのDOM中に2つ以上の同じidが含まれてしまう。

idが重複するために、jQueryなどでセレクタで要素を取得すると、期待外の要素が取れ、期待外動作になるケースがある。

$("#hogehoge").after('

<li>
  newline
</li>');

この動作に気が付かず、おかしな現象に悩まされていた。。

とりあえず、id指定をclass指定にして、

$.mobile.activePage.find(".hogehoge").after('

<li>
  newline
</li>');

と変更。

うまくいったように見える。