javascript jQuery Mobile 弹出窗口未在 .popup('open') 上打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17559883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile popup is not opening on .popup('open')
提问by bamya
I am trying to use jQuery Mobile 1.3.1's popup to warn the user when login credentials are false. I started with a basic template from jquerymobile's documentation, but I couldn't make it work with $('#popupBasic').popup('open');If I use it this way;
我正在尝试使用 jQuery Mobile 1.3.1 的弹出窗口在登录凭据为 false 时警告用户。我从 jquerymobile 文档中的一个基本模板开始，但$('#popupBasic').popup('open');如果我这样使用它，我就无法使用它；
<div data-role="page">
<div data-role="header" data-tap-toggle="false">
</div><!-- /header -->
<div data-role="content">
<a href="#popupBasic" data-rel="popup">Tooltip</a>
<div data-role="popup" id="popupBasic">I will change this text dynamically if this popup works</div>
</div><!-- /content -->
</div><!-- /page -->
It works well when I click on the Tooltip link. But in my case there isn't any click so I am trying this;
当我单击工具提示链接时，它运行良好。但就我而言，没有任何点击，所以我正在尝试；
if(retVal){
$.mobile.changePage('index');
}
else{
$('#popupBasic').popup();
$('#popupBasic').popup("open");
}
this is after my ajax login function makes a callback, so retVal is true if there isn't any errors, false if there is (and at that point I am trying to show popup). By the way all my js part is in
这是在我的 ajax 登录函数进行回调之后，所以如果没有任何错误，则 retVal 为真，如果有则为假（此时我正在尝试显示弹出窗口）。顺便说一下，我所有的 js 部分都在
$(document).on('pageinit', function(){});
so i wait till jquerymobile is ready for the page.
所以我等到 jquerymobile 准备好页面。
What happens when I do this is on desktop browsers link changes as
当我这样做时会发生什么是在桌面浏览器链接更改为
http://localhost/login#&ui-state=dialog
but doesn't show the pop up. After some refreshes and caches it starts to show. On iOS same thing also happens but on android sometimes it changes link some time it doesn't.
但不显示弹出窗口。经过一些刷新和缓存后，它开始显示。在 iOS 上也会发生同样的事情，但在 android 上有时它会更改链接，有时不会。
I would be really happy if someone can help me to solve this problem. Thanks in advance.
如果有人能帮我解决这个问题，我会很高兴。提前致谢。
回答by krishgopinath
That's because when pageinitis fired, the poupup isnt ready for manipulation just yet. You need to use pageshowto get the popup to open. Here's what you do :
那是因为当pageinit被触发时，弹出框还没有准备好进行操作。您需要使用pageshow来打开弹出窗口。这是你要做的：
- Make the ajax call in
pageinit. store the data indataattribute of the page. - Then, in the pageshow event, take if from data and manipulate it the way you want, then open the popup.
- 在
pageinit. 将数据存储data在页面的属性中。 - 然后，在 pageshow 事件中，从数据中获取 if 并按照您想要的方式对其进行操作，然后打开弹出窗口。
Here's the code :
这是代码：
$(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");
And here's a demo : http://jsfiddle.net/hungerpain/MvwBU/
这是一个演示：http: //jsfiddle.net/hungerpain/MvwBU/
