Question

的index.html ：

 <!DOCTYPE HTML>
      <html>
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>Untitled Document</title>
          <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
          <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
          <div data-role="page" id="reviewsPage">
            <script language="text/javascript">
              /* VERY IMPORTANT this is before loading jquery.mobile JS */
              $(document).on("mobileinit", function() {
              // Make your jQuery Mobile framework configuration changes here!


              });

            </script>
            <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
            <script type="text/javascript">
              $(document).on("pagebeforeshow", function(event) {
                $("#mybtn").bind("click", function(e) {
                  $.mobile.showPageLoadingMsg();
                  $.mobile.changePage("twitter.html", {
                  reloadPage: false, changeHash: true,
                });
              });
            });

            </script>
            <div data-role="header">
              <h1>Reviews</h1>
              <a href="#" id="mybtn" class="ui-btn-right" >TWEET</a>
            </div>
          </div>
          </body>
          </html>

tweet.html ：

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    <div data-role="page" id="twitterPage"  >
      <script type="text/javascript">
        $(document).on("mobileinit", function() {
        });

        $(document).bind('pageshow', '#twitterPage', function(event, ui) {
            $(document).on('click', '[data-rel=back]', function() {
            $.mobile.changePage('index.html');
        });
        });
      </script>

      <div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
          <a href="#" id="k" data-rel="back" data-icon="arrow-l">Back</a>
          <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
      </div>
      <div data-role="content">
        <ul id="tweet-list" data-role="listview" data-inset="true">
          <li data-role="list-divider">
            <p>
              Tweets
            </p>
          </li>
        </ul> 
      </div>
    </div>

点击此链接时，我有链接 tweet.html 文件将被调用。但是当我点击后退按钮时，我将被定向到上一页，没有任何错误。但是第二次单击后退按钮后，我将被定向到上一页并再次进入当前页面。

Answer 1

$("#mybtn").unbind();`

unbind事件将阻止此

Jquery Back按钮不起作用

1 个答案: