Unexpected pagecontainer change behavior

问题

So I have this a page, that I want to load using next function:

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

And I have page that I want to be redirected. But at the moment I redirect to it, I get redirected back to the main page.

$(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>

So Here is live demo, because StackOverflow example is not loading: http://runningtracker.herokuapp.com/

So when I click Add Run it should redirect to #add page, it does, but then it redirects back to home page

How can I prevent it from happening?

回答1:

You can prevent the anchor link from reloading the page by returning false on the tap handler:

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

来源：https://stackoverflow.com/questions/30922653/unexpected-pagecontainer-change-behavior

标签

jquery

jquery-ui

jquery-mobile