jQuery Mobile弹出窗口没有打开.popup(’open’)

我试图使用jQuery Mobile 1.3.1的弹出窗口在登录凭据为假时警告用户。 我从jquerymobile的文档开始使用基本模板,但我无法使用$('#popupBasic').popup('open'); 如果我这样使用它;

  
Tooltip
I will change this text dynamically if this popup works

单击Tooltip链接时效果很好。 但在我的情况下,没有任何点击,所以我正在尝试这个;

  if(retVal){ $.mobile.changePage('index'); } else{ $('#popupBasic').popup(); $('#popupBasic').popup("open"); } 

这是在我的ajax登录function进行回调之后,所以如果没有任何错误,则retVal为true,如果存在则为false(并且此时我试图显示弹出窗口)。 顺便说一下,我所有的js部分都在

  $(document).on('pageinit', function(){}); 

所以我等到jquerymobile为页面做好准备。

当我这样做时,会在桌面浏览器链接更改上发生什么

 http://localhost/login#&ui-state=dialog 

但没有显示弹出窗口。 经过一些刷新和缓存后,它开始显示。 在iOS上同样的事情也会发生,但在Android上有时它会改变链接,有时它不会。

如果有人可以帮助我解决这个问题,我会很高兴。 提前致谢。

那是因为当pageinit被触发时,poupup还没有准备好进行操作。 您需要使用pageshow来打开弹出窗口。 这是你做的:

  • pageinit进行ajax调用。 将数据存储在页面的data属性中。
  • 然后,在pageshow事件中,从数据中取出if并按照您想要的方式操作它,然后打开弹出窗口。

这是代码:

 $(document).on({ "pageinit": function () { alert("pageinit"); //$("#popupBasic").popup('open'); will throw error here because the page is not ready yet //simulate ajax call here //data recieved from ajax - might be an array, anything var a = Math.random(); //use this to transfer data betwene events $(this).data("fromAjax", a); }, //open popup here "pageshow": function () { alert("pageshow"); //using stored data in popup $("#popupBasic p").html("Random : " + $(this).data("fromAjax")); //open popup $("#popupBasic").popup('open'); } }, "#page1"); 

这是一个演示: http : //jsfiddle.net/hungerpain/MvwBU/