jQueryMobileでAjaxによるDOM追加後のプラグイン適用などなど。

jQueryMobileの便利なところは、「data-ajax="true"（デフォルト）」によるDOM追加の容易さだと思う。

で、よくハマるのが
追加したDOMにjQueryのプラグインが適用されない
という問題。


AjaxでDOMを追加する場合は、基本的に「追加する方のDOM」ではなく「追加される方のDOM」にプラグインを読み込んでおいたほうがいいので、注意が必要。

■追加元DOM
・jQueryMobile

■追加するDOM
・jQueryプラグイン

という構成ではなく

■追加元DOM
・jQueryMobile
・jQueryプラグイン

■追加するDOM
・純HTML

という構成にしておいて、DOMが追加されたタイミングでプラグイン及びjQueryMobileを適用する…という手順になります。

例えば、Ajaxで追加したDOMにページ遷移エフェクトで移動し、そこで「swipe.js」によるイメージスライダーを使いたい場合には、こんな感じになります。

--------追加元に記述------------------
<link href="/sp/plugin/swipe/style.css" rel="stylesheet" type="text/css"/>
<script src="/sp/plugin/swipe/swipe.js"></script>
<script>
$( '#page' ).live( 'pageinit',function(event){
  var slider = new Swipe(document.getElementById('slider'));
});
</script>

--------追加される方のDOM-------------

<div data-role="page" id="page">
    <div id='slider' class='swipe'>
        <ul style="margin:0;padding:0;">
            <li style='display:block'><div><img src="a.jpg"></div></li>
            <li style='display:none'><div><img src="b.jpg"></div></li>
            <li style='display:none'><div><img src="c.jpg"></div></li>
        </ul>
    </div>
</div>

要するに、DOMを追加してそこに何らかの操作を実行したい場合は

$( '#page' ).live( 'pageinit',function(event){
  DOM追加後に実行したい動作を記述
});

って感じで書けば(・∀・)ｵｯｹｰ!

…と思います。




公式ドキュメントによると

pageinitイベント
ページの自動初期化が終わる際に発火します。このイベントは、一般的なページにおけるDOM ready()イベントの代替として利用することが推奨されます。というのも、これはページが最初にロードされた際にも、Ajaxによるナビゲーションで読み込まれて他のページの内部にコンテンツが挿入される場合にも、機能するからです。

記述例
$( '#aboutPage' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});

とあるので、多分大丈夫かと。



今回はDOM追加後に、ページが構築された後のタイミングで適用だったので「pageinitイベント」を使いましたが、DOM追加後にページが構築される前のタイミングで適用…という場合には「pagecreateイベント」を使います。

$( '#page' ).live( 'pagecreate',function(event){
  ( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});

こんな感じだそうです。


jQueryMobileのAjax機能を使う時は、こうしたイベント処理を細かく書いていく必要があるので、めんどくさい人は「data-ajax="false"」を使うといいかも。

イベント処理関係のjQueryMobile日本語リファレンスはこちらです。
http://dev.screw-axis.com/doc/jquery_mobile/api/events/