3

私は最初の 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

});

別のページに移動するたびにパネルとポップアップの両方が開くのではなく、この動作が発生する理由を誰か教えてもらえますか?

また、ブラウザコンソールからプログラムで開くこともできません（クロムを使用）

これは私の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>
4

1 に答える 1

9

ポップアップとダイアログは、ページ イベントが発生した直後に開くには注意が必要です。この問題を解決するには、 を使用setTimeoutしてダイアログまたはポップアップを開く必要があります。

$(document).on('pageinit', function() {
 setTimeout(function () {
  $('#new-lump-sum').popup('open');
 }, 100); // delay above zero
});
于 2013-06-05T10:31:16.470 に答える