jquery-mobile - クリック可能なオーバーレイを備えた jQuery Mobile の折りたたみ可能な見出し

Question

jQuery Mobile の折りたたみ可能な見出しの上に右側のボタンを重ねようとしていますが、クリック イベントをトリガーできません。div をクリックすると、折りたたみ可能なヘッダーのクリック イベントのみがトリガーされます。クリックリスナーを使用して他の要素に同じ div をオーバーレイすると、それを機能させることができますが (jsfiddle を参照)、折りたたみ可能な見出しの上にはできません。どうすればこれを機能させることができますか？

これはHTMLコードです...

<div data-role="collapsible">
  <h2>Heading
    <div class="clickable" id="clickable">Click</div>
  </h2>
  <p>Content</p>
</div>

... そしてリスナーを追加する JavaScript ...

$(document).on('click', '#clickable', function (e) {
  alert('clickable');
});

...そして最後に使用される CSS ...

.clickable {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  right: 0px;
  top: 0px;
  background-color: #fff;
  z-index: 1000;
}

ここにデモがあります：http://jsfiddle.net/nmp4Lrnt/