jQuery mobile の Collapsible イベントをハンドルする

jQuery mobileCollapsible (折りたたみ式コンテンツ)のイベントをハンドルする方法

以下のようなHTML(抜粋)の場合、

<div data-role="content">
   <div data-role="collapsible" id="my-collaspible">
      <h3 id="title">My Title</h3>
      <div>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value=""  />
      </div>
   </div>
</div>


次の JavaScript Collapsible のイベントをハンドリングする。

$('#my-collaspible').bind('expand',function(){
   alert('Expanded');
}).bind('collapse',function(){
   alert('Collapsed');
});


注意すべきは、、

この JavaScript を、HTML <head>タグ内で書いても動作しない。
  <div data-role="collapsible" id="my-collaspible">..</div>
の後に書かないと動作しない。

<div data-role="content">
   <div data-role="collapsible" id="my-collaspible">
      <h3 id="title">My Title</h3>
      <div>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value=""  />
      </div>
   </div>

<script type="text/javascript">
$('#my-collaspible').bind('expand',function(){
      alert('Expanded');
}).bind('collapse',function(){
      alert('Collapsed');
});
</script>

</div>

実用の為に適用する上で、もっと注意すべきことがある。
ページが開いた直後で、
初期状態が閉じた状態、→ <div data-role="collapsible" id="my-collaspible" data-collapsed="true">
の場合(もしくは、data-collapsed="true"を省略)

  bind('collapse',function() が動く

初期状態が開いた状態、→ <div data-role="collapsible" id="my-collaspible" data-collapsed="false">
の場合

  bind('expand',function()

が動作する。

つまり、今回のコードでは以下のように動作する。

ページを開くと


ページの初期表示、


クリックすると、、、


alert を閉じると、、、


となる。

検証した環境は、
Winsows Chrome

jQuery mobile 1.1.0

jQuery 1.7.2