Question

使用jquery-mobile我试图在用户点击删除时从第一个弹出窗口打开第二个弹出窗口（确认）。

我在这里看到了一个与jsfiddle代码http://jsfiddle.net/EWQ6n/520/类似的线程：Opening Dialog from within a Dialog in JQuery Mobile

但是，即使将这个有效的弹出代码复制并粘贴到我的jsfiddle中也行不通。我正在使用jQuery 1.10.1和1.4.2移动版。上面的线程中的工作jsfiddle使用1.9。移动1.30b.1 当我将jquery更改为旧版本时，它可以正常工作。 （我知道，这似乎是简单的答案，但现在改变将搞乱其他代码依赖和样式。我想了解这个问题。）

    <!-- first popup -->
<div data-role="popup" id="popupInfo" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" class="ui-corner-top">
         <h1>Contact Info</h1>
    </div>
    <div data-role="content" data-theme="a">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" placeholder="Display name" data-theme="a">
        <label for="tel">Number:</label>
        <input type="tel" name="tel" id="tel" value="" placeholder="tel" data-theme="a">
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>
<a href="#popupDelete" data-role="button" data-rel="popup" data-transition="flow" data-icon="minus">Delete</a>
    </div>
</div>

<!-- second popup -->        
<div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
    <div data-role="header" data-theme="aa" class="ui-corner-top">
         <h1>Delete Contact?</h1>

    </div>
    <div data-role="content" data-theme="dd">
         <h3 class="ui-title">Are you sure you want to delete <span>#</span> from your contacts?</h3>

        <p>This action cannot be undone.</p>
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-inline">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>

    </div>
</div>

我也注意到在jsfiddle中，我的第一个弹出代码中的最后2个div是红色的。（这是否意味着它们无效？）在我的编辑器中，它们看起来似乎是有效的HTML - 至少我找不到任何问题。

这是我的非工作jsfiddle：http://jsfiddle.net/gmdavis62/7AuNC/2/

Answer 1

感谢@ezanker，我有一个解决方案。在另一篇文章的popup api link之后，我找到了一个不涉及插件的简单解决方案。

$(document).on("pageinit", function () {
  $('#del').click(function (e) { // e is the event
    setTimeout(function () {
        $("#popupDelete").popup("open")
    }, 100);
  });
});

我有一个jsfiddle来演示这个。

如何从第一个弹出窗口打开第二个jquery-mobile弹出窗口

1 个答案: