0

jquery mobile popupがあります。オープン後に何かやってみたいです。問題はイベントに来ていません：

$(document).ready(function () {  
    $("#alertsPopup1").bind({
        popupafteropen: function (event, ui) { alert('popup'); }
    });
});

ここで、html にポップアップが表示されます。

 <div data-role="popup" data-corners="false" class="alertsPopup"
                id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
                <p>
                    aaaa</p>
            </div>

何が問題なのか理解できません。バインドは問題なく通過します (Chrome のコンソールでテストしました)。

助けていただければ幸いです。

4

1 に答える 1

3

まず、jQuery Mobile で準備が整ったドキュメントを使用しないでください。jQuery Mobile が 内のページを正しく処理する前にトリガーされることがありますDOM。その理由をここで読んでください。

ドキュメント対応の代わりに、適切な jQuery Mobile ページ イベントを使用する必要があります。詳細については、前のリンクを参照してください。

また、可能であれば、委任されたイベント バインディングを使用します。基本的に on 関数を使用してイベントをバインドし、それをドキュメント レベルにバインドします。委譲されたイベント バインディングは、ドキュメントの準備ができている使用の問題を解決する必要がありDOMます。

Javascript :

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on("popupafteropen", "#alertsPopup1",function( event, ui ) {
        alert('popup');
    });  
});

HTML :

<div data-role="page" id="index">       
    <div data-role="content">
        <a href="#alertsPopup1" data-rel="popup">Open Popup</a>
        <div data-role="popup" data-corners="false" class="alertsPopup"
        id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
            <p>
                aaaa</p>
        </div>
    </div>
</div>

作業例: http://jsfiddle.net/Gajotres/Jgajv/

于 2013-07-17T06:56:15.603 に答える