CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Xander
Xander

Reputation: 1011

How to link to internal pages using changePage?

I currently have one index.html file with 3 pages in (with separate IDs). I also have 3 buttons which are displayed on all 3 pages, which I would like to link to each page when clicked. However, the link only works from the index.html page and once on another page, the events are no longer handled.

Basically when I'm on page 2 or 3, the click events aren't handled. (Tested with console.log)

html:

<div data-role="page" id="article1">
    <div data-role="header" data-theme="a" data-position="fixed">
         <h1>Notes</h1>
    </div>

<div id="global-footer" data-role="footer" data-position="fixed" data-theme="a" data-id="main-footer" class="ui-bar">
     <div id="footer-container">
          <button id="notespagebtn" class="notespagebtn" data-role="none">Notes</button>
          <button id="reminderspagebtn" class="reminderspagebtn" data-role="none">Reminders</button>
          <button id="listspagebtn" class="listspagebtn" data-role="none">Lists</button>
      </div> 
    </div> 

</div>

<div data-role="page" id="article2">
     <div data-role="header" data-theme="a" data-position="fixed">
         <h1>Reminders</h1>
     </div>

<div id="global-footer" data-role="footer" data-position="fixed" data-theme="a" data-id="main-footer" class="ui-bar">
    <div id="footer-container">
        <button id="notespagebtn" class="notespagebtn" data-role="none">Notes</button>
        <button id="reminderspagebtn" class="reminderspagebtn" data-role="none">Reminders</button>
        <button id="listspagebtn" class="listspagebtn" data-role="none">Lists</button>
     </div> 
  </div> 

</div>

<div data-role="page" id="article3">
    <div data-role="header" data-theme="a" data-position="fixed">
        <h1>Lists</h1>
    </div>

   <div id="global-footer" data-role="footer" data-position="fixed" data-theme="a" data-id="main-footer" class="ui-bar">
        <div id="footer-container">
             <button id="notespagebtn" class="notespagebtn" data-role="none">Notes</button>
             <button id="reminderspagebtn" class="reminderspagebtn" data-role="none">Reminders</button>
             <button id="listspagebtn" class="listspagebtn" data-role="none">Lists</button>
   </div> 
</div>

JS:

$("#notespagebtn").click(function() {
        $.mobile.changePage("#article1");
    });

    $("#reminderspagebtn").click(function() {
        console.log("test");
        $.mobile.changePage("#article2");
    });

    $("#listspagebtn").click(function() {
        console.log("test");
        $.mobile.changePage("#article3");
    });

Upvotes: 0

Views: 18

Answers (1)

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Buttons have same ID for all 3 pages. give them different Ids or use class to bind the event.

Jsfiddle

$(".notespagebtn").click(function() {
    $.mobile.changePage("#article1");
});

$(".reminderspagebtn").click(function() {
    console.log("test");
    $.mobile.changePage("#article2");
});

$(".listspagebtn").click(function() {
    console.log("test");
    $.mobile.changePage("#article3");
});

Upvotes: 1

Related Questions