0

以下のコードに示すように、別の .html ページからの変更ページで適切に読み込まれるページがあります。jquery mobile の changepage は、新しいページが現在の DOM に読み込まれることを意味することを認識しています。そのため、. 内に pageshow イベント ハンドラーを含めました。しかし、ページを変更しようとすると、終わりのない進行状況インジケーターが表示され、ページの変更が行われません。

 <!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>

この問題の解決策を見つけようとしましたが、多くの方法を試しましたが、どれも問題を解決していません。

よろしく、シュレヤス

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 に答える