意外的页面容器更改行为答案

【问题标题】：Unexpected pagecontainer change behavior意外的页面容器更改行为
【发布时间】：2015-06-18 18:07:21
【问题描述】：

所以我有一个页面，我想使用下一个函数加载：

//Function to Redirect to add page
    function redirectAdd() {
        $("body").pagecontainer("change", "#add", {
            transition : "fade"
        });
    }

我有想要重定向的页面。但是在我重定向到它的那一刻，我被重定向回主页。

$(document).on("pagecreate", "#home", function() {
  //Redirections
  $('#addRun').on("tap", redirectAdd);
  $('#home').on("tap", redirectHome);
  $('#editRun').on("tap", redirectEdit);

  //Function to Redirect to home page
  function redirectHome() {
    $("body").pagecontainer("change", "#home", {
      transition: "fade"
    });
  }

  //Function to Redirect to add page
  function redirectAdd() {
    $("body").pagecontainer("change", "#add", {
      transition: "fade"
    });
  }

});

<!DOCTYPE html>
<html>

<head>
  <title>Running Tracker</title>
  <link rel="stylesheet" href="css/style.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>
  <!-- Main Page -->
  <div data-role="page" id="home">
    <header data-role="header" data-theme="a">
      <h1>Running Tracker</h1>
    </header>
    <div data-role="navbar">
      <ul>
        <li>
          <a href="#" id="addRun" data-transition="none" data-icon="plus">Add Run</a>
        </li>
      </ul>
    </div>
    <div data-role="content">
      <h3>Welcome to the RunningTracker App</h3>
      <p>
        With this app you can track your running, jogging or walking.
      </p>

      <h3>Your Latest Runs:</h3>

      <ul id="stats" class="current" data-role="listview" data-filter="true" data-filter-placeholder="Filter runs by date or distance." data-inset="true"></ul>
      <br/>
      <button id="clearRuns" onclick="return confirm('Are You Sure?')">
        Clear Data
      </button>
    </div>
    <footer data-role="footer">
      <h4>RunningTracker &copy; 2015 GZ</h4>
    </footer>
  </div>
  <!-- Add Run Page -->
  <div data-role="page" id="add">
    <header data-role="header" data-theme="a">
      <h1>Running Tracker</h1>
    </header>
    <div data-role="navbar">
      <ul>
        <li>
          <a href="#" id="#home" data-transition="none" data-icon="home">Home</a>
        </li>
      </ul>
    </div>
    <div data-role="content">
      <h3>Add Run</h3>
      <form id="addForm">
        <label for="km">Enter Kilometres:</label>
        <input type="number" id="addKms">
        <label for="km">Enter Date:</label>
        <input type="date" data-role="date" class="date" id="addDate" data-inline="true">
        <button id="submitAdd" class="ui-btn ui-corner-all">
          Add Run
        </button>
      </form>
    </div>
    <footer data-role="footer">
      <h4>RunningTracker &copy; 2015 GZ</h4>
    </footer>
  </div>
  <!-- Add Edit Page -->
  <div data-role="page" id="edit">
    <header data-role="header" data-theme="a">
      <h1>Running Tracker</h1>
    </header>
    <div data-role="navbar">
      <ul>
        <li>
          <a href="#home" data-transition="none" data-icon="home">Home</a>
        </li>
      </ul>
    </div>
    <div data-role="content">
      <h3>Edit Run</h3>
      <form id="addForm">
        <label for="km">Enter Kilometres:</label>
        <input type="number" id="editKms">
        <label for="km">Enter Date:</label>
        <input type="date" data-role="date" class="date" id="editDate" data-inline="true">
        <button id="submitEdit" class="ui-btn ui-corner-all">
          Update
        </button>
      </form>
    </div>
    <footer data-role="footer">
      <h4>RunningTracker &copy; 2015 GZ</h4>
    </footer>
  </div>
</body>

</html>

所以这里是现场演示，因为没有加载 StackOverflow 示例：http://runningtracker.herokuapp.com/

因此，当我单击“添加运行”时，它应该重定向到 #add 页面，确实如此，但随后它重定向回 home 页面

我怎样才能防止它发生？

【问题讨论】：

标签： jquery jquery-ui jquery-mobile

【解决方案1】：

您可以通过在点击处理程序上返回 false 来防止锚链接重新加载页面：

  function redirectAdd(e) {
    $("body").pagecontainer("change", "#add", {
      transition: "fade"
    });
    return false;
  }

【讨论】：