[jQuery mobile] buttonタグでPopUpを開く方法

jQuery mobileでポップアップを開く時は通常<a>タグにdata-rel属性で指定しますが、
フレームワーク等の縛りなどでbuttonタグを使いたい場合の回避策をまとめます。

NGな書き方

<button data-rel="popup" onClick="location.href='#popup'">ポップアップを開く</button>

回避策

<!-- ポップアップ本体 -->
<div id="popup" data-role="popup">
<!-- 省略 -->
</div>

<!-- 1.非表示のリンクを作る -->
<div style="display:none;">
    <!-- data-transitionやdata-position-toなどを付けたい場合はここでつける -->
    <a href="#popup" data-rel="popup" id="hiddenBtn">
        <!-- 中身は空でおｋ -->
    </a>
</div>


<!-- 2.Buttonタグを設置 -->
<button id="popupBtn">ポップアップを開く</button>

あとは、ボタンが押された時にaタグのクリックイベントを発火させればポップアップが開きます。

$(function(){
    $('#popupBtn').on('click', function(){
        //Clickイベントを発火させる
        $('#hiddenBtn').click();//※cは小文字なので注意
    });
}


// モバイルサイトならClickイベントではなく、Tapイベントを使うと表示速度の面で効果的
$('#popupBtn').on('tap', function(){
    $('#hiddenBtn').click();
});