javascript - 弹出窗口打开事件后不起作用

Question

我有一个 jquery 移动弹出窗口。我想在它打开后执行一些操作。问题是没有参加事件:

$(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>

我不明白问题是什么，它顺利地通过了绑定(bind)(我在 Chrome 的控制台中测试过)。

非常感谢您的帮助。

Answer 1

首先不要使用 jQuery Mobile 准备好的文档，有时它会在 jQuery Mobile 能够在 DOM 内正确处理页面之前触发。阅读here 为什么。

您应该使用正确的 jQuery Mobile 页面事件，而不是准备好文档。在之前的链接中了解有关它们的更多信息。

如果可能的话，也使用委托(delegate)事件绑定(bind)。基本上使用 on 函数来绑定(bind)事件并将其绑定(bind)到文档级别。委托(delegate)事件绑定(bind)应该解决文档就绪使用的问题，主要是因为它不关心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/