Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

因此，当我点击添加运行时，它会重定向到#add页面，但确实如此，但它会重定向回home页面

如何防止它发生？

Answer 1

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

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

意外的pagecontainer更改行为

1 个答案: