0

我有一个页面，如下面的代码所示，可以在另一个 .html 页面的更改页面上正确加载。我知道 jquery mobile 中的 changepage 意味着新页面被加载到当前 DOM 中。所以我在 . 但是现在当我尝试更改页面时，我看到一个无休止的进度指示器并且没有发生更改页面。

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <title>Demo Mobile AUI</title>
        <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="WebSocketConnection.js"></script>-->
    </head>
    <body>
        <!--MAIN SCREEN-->
        <div data-role="page" id="home">
            <script type="text/javascript">
                $('#home').live('pageshow', function(event, ui) {
                    alert("pageshow");
                });
            </script>
            <div data-role="header" data-position="fixed" align="center">
                <div data-role="controlgroup" data-type="horizontal">
                <h1>
                    <a href="login.html" data-role="button" data-icon="back" data-iconpos="notext">Back</a>
                    <a href="#home" data-role="button" data-icon="grid">Menu</a> 
                    <a href="login.html" data-role="button" data-icon="delete" >Log Out</a>
                    <a href="#settings" data-role="button" data-icon="gear">Settings</a>
                </h1>
                </div>
            </div> 

            <div data-role="content" data-theme="b">
                <div data-role="collapsible-set">

                  <!-- Transmitter Configuration Collapsible List -->
                  <div data-role="collapsible" data-collapsed="false">
                    <h3>Transmitter Configuration</h3>
                    <ul data-role="listview" data-inset="false">    
                      <li>Power: <div id="power"></div></li>
                      <li>Set Point:</li>
                      <li>Reflected Power:</li>   
                      <li>Frequency:</li>
                      <li>
                        <label for="preset_list" class="select">Preset:</label>
                        <select name="preset_list" id="select-choice-0" data-inset="false" data-theme="a"></select>
                      </li>
                    </ul>
                  </div>

                  <!-- Tool Menu Collapsible List -->
                  <div data-role="collapsible" data-collapsed="true">
                    <h3>Tool Menu</h3>
                    <ul data-role="listview" data-inset="false"><li>
                    <form action="form.php" method="post">
                    <div data-role="fieldcontain">
                      <label for="graph" class="select">Current Graph:</label>
                      <select name="graph" id="select-choice-0" data-inset="false" data-theme="a">
                        <option value="spectrum">Spectrum</option>
                        <option value="EqFreq">EQ Frequency Response</option>
                        <option value="EqImpulse">EQ Impulse Response</option>
                        <option value="EqFilter">EQ Filter Delay</option>
                        <option value="lissajous">Lissajous Plot</option>
                      </select>
                    </div>
                    </form>
                    </li></ul>
                  </div>

                  <!-- Transmitter Log Collapsible List -->
                  <div data-role="collapsible" data-collapsed="true">
                    <h3>Transmitter Log</h3>
                  </div>

                  <!-- Meters Collapsible List -->    
                  <div data-role="collapsible" data-collapsed="true" data-inset="false">
                    <h3>Meter Readings</h3>
                    <ul data-role="listview" data-inset="false"><li>
                    <div id="checkBoxList">
                        <div data-role="collapsible" data-collapsed="true" data-inset="false">
                            <h3>Controller</h3>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-inset="false">
                            <h3>Exciter</h3>
                        </div>
                    </div>
                  </div>
                  <textarea cols="40" rows="3" name="textarea" id="info_log" height="auto" width="auto"></textarea>
                </div>

              </div>
              <div data-role="footer" align="center">
                    &copy; Copyright  by Nautel Limited
              </div>
        </div>
    </body>
</html>

我试图找到解决这个问题的方法，尽管我尝试了很多，但都没有解决这个问题。

问候， Shreyas

4

1 回答 1

0

.live()已贬值。以后不要使用它。我注意到它之前可以工作，jQuery Mobile 1.2.x但之后停止工作1.3.x。

如下更改您的代码。

$('#home').on('pageshow', function(event, ui) {
    alert("pageshow");
});

我已经改变了live，on事件肯定会触发。

于 2013-03-13T05:45:09.863 回答