在 Jquery-Mobile 中的 pageshow 上打开一个弹出窗口答案

【问题标题】：Open a popup on pageshow in Jquery-Mobile在 Jquery-Mobile 中的 pageshow 上打开一个弹出窗口
【发布时间】：2012-10-12 12:21:43
【问题描述】：

看来我无法在使用事件“pageshow”调用的方法中打开弹出窗口。我知道我的代码没有错，因为当我单击按钮时会打开弹出窗口......并且我在 Firebug 中检查了没有错误消息。这是代码：

HTML：

<div data-role="popup" id="myPopup">
    ... my elements
</div>

JS：

$('#p_guarantee').live('pageshow', function(){
    $('#myPopup').popup('open');
});

有人知道有什么特别的事情要做吗？如果您能解决我的问题，我将不胜感激:)

提前致谢！

【问题讨论】：

你试过在pagechange上这样做吗？
如果您的弹出 div 在您更改为新页面之前实际上位于先前存在的页面上，还是在您要更改为的新页面上？
它在我要更改的页面上！
我想到了最后一件事 - 尝试通过 setTimeout() 和/或从弹出 div 中删除 data-role="popup" 来执行弹出功能...如果这些没有帮助，我我可能没有建议了:)
哼，与 setTimeout("...", 100);但我不认为这是我们应该做的！但是直到我找到一个更好的方法来解决这个问题！非常感谢您的帮助:-)

标签： jquery-mobile popup

【解决方案1】：

根据我们在 cmets 中的讨论，您可以在触发 pageChange 事件后使用 setTimeout() 函数解决此问题。我怀疑这可能是因为页面首先被渲染和改进，只有在此之后，具有特殊含义的元素（如弹出窗口）才会绑定它们的事件。

您也可以尝试从弹出式 DIV 中完全删除 data-role="popup"，并基本上这样做：

<div id="myPopup">
    ... my elements
</div>

$('#p_guarantee').live('pagechange', function(){
    $('#myPopup').popup();
    $('#myPopup').popup('open');
});

...看看这是否适合你。

【讨论】：

我没有尝试使用 pageChange 事件，但对我来说可以使用 pageshow 事件 :) 并且您的第二种解决方案存在一个问题：如果您删除“data-role”属性，则div的内容将显示在页面中。
嗯，那个数据角色的东西看起来很奇怪，特别是因为我认为 popup() 基本上会取代它的功能......但感谢您的提醒！

【解决方案2】：

我认为您的代码没有问题。您正在为哪个平台开发？

试试这个例子中的代码：http://jsfiddle.net/hhejq/1/

【讨论】：

我正在为 iPad 开发，但我也在 Firefox 上尝试过，但这并没有改变任何东西。不幸的是，您的代码也不起作用:(
Edit 您的代码有效，但仅当我在页面上并刷新它时，而不是当我来自另一个页面时。这很奇怪……
在调用弹出open方法之前尝试写$('.ui-page-active').trigger('create');。
这不会改变任何事情:(

【解决方案3】：

如果你想使用 jquery mobile 弹出首先创建一个带有 data-rel popup 和 href 的链接，指向包含 pop 元素的容器的 id。 div 应该有 data-role 弹出窗口

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
example
<a href="#pop" data-rel="popup>click me</a>
<div data-role="popup" id="pop">
... pop up elements go here ...
</div>

【讨论】：