弹出窗口在 jquerymobile 中不起作用

Question

我有点迷路了 - 我从 jquery 演示页面中获取了一个弹出示例作为模板...

如果我将弹出窗口放在第一页中，它会起作用 - 我可以从 js 脚本中调用它来打开。

因此...以下确实有效

    <div data-role="page" class="page" id="Menu">
    <div data-role="header" data-position="fixed" class="ui-title center">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">&nbsp;</a>
            <a href="#OrderList" class="ui-btn ui-corner-all width150 htitle OrderList">&nbsp;<span class='htitle'>Barserver.com</span>&nbsp;</a>
            <a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext">&nbsp;</a>
        </div>
    </div>
    <div id="MainContent">
        <div id="MenuList"></div>    
    </div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="a">
        <h1>Delete Page?</h1>
        </div>
        <div role="main" class="ui-content">
            <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
        </div>
</div>

我可以通过

动态打开它

$("#popup").popup("open");

但是，如果我将弹出窗口移动到同一文档中的另一个（数据角色）页面，它不会显示，console.log 中也不会出现错误。谁能引导我前进？以下不起作用...

<div data-role="page" class="page" id="OrderList">
    <div data-role="header" data-position="fixed" class="ui-title text-center">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#Menu" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext Menu">&nbsp;</a>
            <a href="#Menu" class="ui-btn ui-corner-all width150 htitle Menu">&nbsp;<span class='htitle'>Barserver.com</span>&nbsp;</a>
            <a href="#Customer" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">&nbsp;</a>
        </div>
    </div>
    <div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
            <div data-role="header" data-theme="a">
            <h1>Delete Page?</h1>
            </div>
            <div role="main" class="ui-content">
                <h3 class="ui-title">Are you sure you want to delete this page?</h3>
            <p>This action cannot be undone.</p>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
            </div>
    </div>
        </div>

为避免误解 - 第一个代码示例有效，第二个无效（意味着没有错误，没有显示类似对话框的模式）。

为什么？

（当然感谢所有帮助）

Answer 1

我明白了（感谢@Omar 的指导）。编码答案并不容易，但我会在几天内尝试草稿并分享（由于试图解决这个问题，我的工作落后了）。

出于本文的目的，当我说 "this failed" 时，我的意思是 "no popup, no change in address bar, no console error."

我有一个表格。如果操作员试图离开，则应进行测试以确认输入了所有数据。我所有的 a-href 标签都有页面引用，jquery 使 a-href 标签优先于我应用的任何其他事件。我没有考虑这件事的后果。结果？显示的表单，未完全填写，操作员选择导航到其他地方，弹出调用 starts/ends 但 "failed" 和 jquery 快速导航到 a-href 页面中指定的页面。

解决方法：使用弹出窗口时，不要在 a-href 标签中命名页面。因此，在使用弹出窗口时，避免

<a href='#Page5'>Page 5</a>

而是

<a href='#' id='page5'>Page 5</a>

并创建一个事件来决定是否应显示弹出窗口，否则应导航至第 5 页。

我希望这是有道理的。

弹出窗口在 jquerymobile 中不起作用

Popup not working within jquerymobile

jquery-mobile

jquery-mobile-popup