[jQuery Mobile] beta 1でハマった点まとめ

jQuery MobileのBeta 1 (jquery.mobile-1.0b1.js) が公開されましたね。
レスポンシブ・レイアウトへの対応やアドレスバーが隠れるようになったり、結構すごいです。
私も早速自分の作っているサイトに適応してみたのですが、幾つかつまずいた点があったのでまとめてみます。

・ページがスマートフォンに最適化されない。

なぜかデスクトップのブラウザと同じように表示されます。ちょっと悩みましたが、公式デモページのソースに答えはありました。一行追加するだけで解消です。

<meta name="viewport" content="width=device-width, initial-scale=1">

レスポンシブ・レイアウトに対応したことと関係あるんですかねー

・ clickイベントが使えない

デスクトップのブラウザでは普通に動作するのですが、Androidで試したところ、clickイベントにバインドしたファンクションが動いてくれませんでした。
これの答えは公式ブログに書いてありました。 KEY CHANGESの項に、

「アドレスバー隠すためにfastclickっていうイベント作ったよ。このイベントのせいでもしかしたらclickイベント使えなくなるかもねー（超意訳）」

とかそんなことが書いてあります。
回避策としては２つあります。

1. clickイベントではなくvclickイベントにバインドする。

2. mobileinitイベント時に、useFastClick(false)を設定する。

ちなみに、2番だとアドレスバーが隠れなくなるようです。vclickイベントにバインドを変更するのが無難かなー。

2011/09/06 補足: jQuery Mobile beta 2ではfastclickが廃止され、clickイベントに戻ったようです。一部端末でfastclickイベントか二度検出されたり、という不具合があったようです。

・vclickイベントからイベント発生元オブジェクトを取得する方法がわからない

これ個人的にすごくハマった。
alpha 4 では、動的にリストを作成し、各li要素にclickイベントをバインドして、 イベントからクリックされたli要素を取得、ということをやっていました。
この時、

$(event.currentTarget).children("#hoge").text();

という形でli要素内の任意の子要素を取得していました。
ところが、beta 1 でclickイベントをvclickイベントに変更すると、上の方法ではクリックされたliを取得できませんでした。
公式ブログやらjQuery Mobileのソースやらを読んでみると、vclickはマウスのクリックイベントとタッチパネルデバイスのタップイベントやらを統合していい感じに処理してくれるカスタムイベントのようです。
で、取得したイベントの中の要素をここを参考にしてこんな感じで全部見てみました。

var props = new Array();
for (var key in event){
    props.push(key);
}
props.sort();
$("#msg").html(props.join("<br />")).css("text-align", "left");

上記のコードを利用して、イベント内の怪しそうな要素をかたっぱしから見ていった結果、

$(event.originalEvent.target.parentElement).find("hoge").text();

でクリックされたli要素内の任意の子孫要素を取得できました。
なんかもっとスマートなやり方がありそうな気もするんですけどねー。 

・検索ボックスにイベントをバインドできない。 

別のエントリにまとめました。