个人中心
gpt4 book ai didi

jquery-mobile - 无法在 jQuery Mobile 中以编程方式打开面板或弹出窗口

转载 作者：行者123 更新时间：2023-12-04 02:24:47 27 4
gpt4 key购买 nike

我正在构建我的第一个 JQM 网站，所以我认为我遗漏了一些简单的小东西，这给我带来了很多问题。

我已经设置了页面、页眉、内容和页脚以及菜单面板。然后我有一个 js 文件，内容如下:

$(document).on('pageinit', function (event) {

alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works

});

谁能告诉我为什么每次导航到另一个页面时我都会出现这种行为，而不是面板和弹出窗口都打开？

我也无法从浏览器控制台以编程方式打开它们(使用 chrome)

这是我的 HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Cashflow - IFA Portal</title>

    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link href="/Styles/System.css" rel="stylesheet" />

    <script src="/Scripts/jquery-1.7.1.min.js"></script>

    <script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
    <script src="/Scripts/highcharts.js"></script>
    <script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
    <div id="page-wrapper">
        <div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
               <div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
            <li><a href="/"><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</a></li>
            <li><a href="/Tools"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</a></li>
            <li><a href="/Tools/Cashflow"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</a></li>
            <li><a href="/Client"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</a></li>
            <li><a href="/Proposal"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</a></li>
            <li><a href="/Fund"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</a></li>
        </ul>
    </div>
                <div id="header" data-role="header" data-theme="d">
        <div id="top-border"></div>
        <div class="floatleft">
            <a href="#menu-panel" title="Menu" id="menu-button" data-role="button" data-icon="grid" data-inline="true" data-iconpos="notext"></a>
        </div>
        <div id="logo">
            <img src="/Images/AllanGray-Logo.png" />
        </div>

        <div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
            <a href="#right-panel" data-role="button" data-icon="star" title="Favourites">Favourites</a>
            <a href="#right-panel" data-role="button" title="Notes"><img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes</a>
            <a href="#display-options" data-role="button" data-rel="popup" data-position-to="window" data-icon="gear" title="Display Options">Display Settings</a>
        </div>


        <div id="logout">
            <section id="login">
                        <a href="/Account/Login" data-role="button" data-inline="true" data-mini="true" data-style="b">Log In</a>

            </section>   
        </div>

        <div id="display-options" data-role="popup" class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <form>
                <fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
                    <legend>Theme</legend>
                        <input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
                        <label for="theme-1" class="theme-option">Android</label>

                        <input type="radio" name="theme" id="theme-2" value="apple"  />
                        <label for="theme-2" class="theme-option">Apple</label>

                        <input type="radio" name="theme" id="theme-3" value="windows"  />
                        <label for="theme-3" class="theme-option">Windows</label>
                </fieldset>
                <br />
                <fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
                    <legend>Screen Size</legend>
                        <input type="radio" name="size" id="size-1" value="computer" checked="checked" />
                        <label for="size-1" class="size-option">Computer</label>

                        <input type="radio" name="size" id="size-2" value="tablet"  />
                        <label for="size-2" class="size-option">Tablet</label>

                        <input type="radio" name="size" id="size-3" value="phone"  />
                        <label for="size-3" class="size-option">Phone</label>
                </fieldset>
           </form>
        </div>
    </div>

            <div id="content" data-role="content">






<h2>Cashflow Calculator</h2>

<div class="ui-grid-a">

    <div class="ui-block-a" style="padding-right:5px;">
        <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Investment Assumptions</h3>

            <div data-role="fieldcontain" class="narrow">
                <label for="time">Time horizon (years)</label>
                <input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>

                <label for="nominal">Nominal return after unit trust fees (%)</label>
                <input type="text" name="nominal" id="nominal" value="" />

                <label for="inflation">Inflation rate p.a. (%)</label>
                <input type="text" name="inflation" id="inflation" value="" />

                <label for="administration-fees">Net platform administration fees (%)</label>
                <input type="text" name="administration-fees" id="administration-fees" value="" />

                <label for="advisor-fees">Financial advisor fees (%)</label>
                <input type="text" name="advisor-fees" id="advisor-fees" value="" />
            </div>
        </div>

        <a href="#new-lump-sum" data-role="button" data-rel="popup" data-position-to="window" data-icon="plus" data-inline="true" data-mini="true">Add Contributions or Withdrawals</a>

        <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Contributions & Withdrawals </h3>



            <ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
                <li>
                    <a>
                        <h3>Contribution: R20 000</h3>
                        <p class="topic"><strong>Recurres: 6 times</strong></p>
                        <p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
                    </a>
                    <a href="#" class="delete">Delete</a>
                </li>
                <li>
                    <a href="#demo-mail">
                        <h3>Contribution: R5000</h3>
                        <p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
                    </a>
                    <a href="#" class="delete">Delete</a>
                </li>
                <li>
                    <a href="#demo-mail">
                        <h3>Withdrawal: -R25 000</h3>
                        <p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
                    </a>
                    <a href="#" class="delete">Delete</a>
                </li>
            </ul>

        </div>



        <div data-role="popup" id="new-lump-sum" class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <form>
                <fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
                    <legend>Add New</legend>
                        <input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
                        <label for="contribution" class="">Contribution</label>

                        <input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal"  />
                        <label for="withdrawal" class="">Withdrawal</label>
                </fieldset>

                <label for="lump-sum-amount">Amount (R)</label>
                <input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />

                <label for="lump-sum-date">Date</label>
                <input type="text" name="lump-sum-date" id="lump-sum-date" value="" />

                <a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
            </form>
        </div>

    </div>

    <div class="ui-block-b" style="padding-left:5px;">
        <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Future Value Graph</h3>


            <div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>

            <script type="text/javascript">


            </script>


        </div>

    </div>
</div>


            </div>

            <div id="footer" data-role="footer">
    <div id="bottom-border"></div>
    <p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
                <div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
        <a href="#page" data-rel="close" data-role="button" data-iconpos="notext" data-icon="delete"></a>
        <h3>Favourites</h3>
        <div id="search-box">
            <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
        </div>
    </div>





            <script>

            </script>

        </div><!-- End Page -->
    </div>

</body>
</html>

最佳答案

在页面事件发生后立即打开弹出窗口和对话框很棘手。要解决此问题，您需要使用 setTimeout 打开对话框或弹出窗口。

$(document).on('pageinit', function() {
 setTimeout(function () {
  $('#new-lump-sum').popup('open');
 }, 100); // delay above zero
});

关于jquery-mobile - 无法在 jQuery Mobile 中以编程方式打开面板或弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16937144/

27 4 0
文章推荐： Oracle 11GR2 TKPROF - 如何捕获递归调用树
文章推荐： spring - SimpMessagingTemplate 与 MessageSendingOperations
文章推荐： sql - Oracle 文档不是 NVL
文章推荐： javascript - 垃圾收集器支持的 "undefined"或 "null"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com