jQuery移动端页面初始化时弹出窗口

Question

我希望页面加载时弹出一个弹窗，但似乎一直卡在旋转的圆圈上。

这里有一个演示问题的fiddler，任何帮助都将不胜感激。

http://jsfiddle.net/Ohpyx/UGfXG/

我正在使用的代码是：

$(document).live('pageinit',function(event){
    $('#popupBasic').popup('open');
})​

- user1886891

Answer 1

这是我的解决方法：

$(document).on('pageinit', '.ui-page',function(event){
    setTimeout(function () {
        $('#popupBasic').popup('open');
    }, 0);//Note the comment below from @Taifun.
})​

您遇到了一种竞态条件，导致弹出窗口代码被放置在队列的末尾。

这里有一个演示：http://jsfiddle.net/UGfXG/6/ 注意：我将.live()替换为.on()（委托版本），因为前者已经在jQuery 1.7中被弃用。

- Jasper

---

您需要将超时时间设置为大于0才能让此程序运行，另请参考https://dev59.com/AWnWa4cB1Zd3GeqPzVj5#13240507... - Taifun

@Taifun 我在Chrome和Android浏览器上测试了一下，都可以正常工作，所以感谢你在其他浏览器上的发现。Firefox对我来说不起作用，但当我将延迟更改为“100ms”时，它就可以工作了。 - Jasper

啊，太棒了，谢谢大家。我在文档中读到了关于使用超时与链接的内容，但是其中的原因并没有让我理解。现在我开始明白了，可能会花费我的晚上更深入地搜索这个问题。谢谢！ - user1886891

Answer 2

.popup('open') 需要 $.mobile.activePage，该对象在 pageinit 事件之后设置。 对于弹出窗口，pagechange 事件似乎更为合适。

这对我有用：

$(document).on('pagechange',function(event){
    $('#popupBasic').popup('open');
})​

如果您希望它只在第一次加载时出现，请使用.one：

$(document).one('pagechange',function(event){
    $('#popupBasic').popup('open');
})​

请查看https://github.com/jquery/jquery-mobile/issues/3384

- Guillaume L.