jquery-mobile - hechas - jquery mobile demos

No se puede abrir el panel o emergente programáticamente en jQuery Mobile (1)

Estoy construyendo mi primer sitio de JQM, así que creo que me falta algo simple que me está causando un montón de problemas.

Configuré la página, el encabezado, el contenido y el pie de página, y un panel para el menú. Luego tengo un archivo js con lo siguiente:

$(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 });

¿Puede alguien decirme por qué estoy obteniendo este comportamiento en lugar de abrir tanto el panel como la ventana emergente cada vez que navega a otra página?

Tampoco puedo abrirlos programáticamente desde la consola del navegador (usando Chrome)

Este es mi 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"> <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> </div> </body> </html>

Las ventanas emergentes y los cuadros de diálogo son complicados cuando se trata de abrirlos justo después de que ocurre un evento de página. Para solucionar este problema, debe usar setTimeout para abrir un cuadro de diálogo o una ventana emergente.

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