如何使用 changePage 链接到内部页面？

Question

我目前有一个 index.html 文件，其中包含 3 页（具有单独的 ID）。我还有 3 个按钮显示在所有 3 个页面上，我想在单击时链接到每个页面。但是，该链接仅适用于 index.html 页面，一旦在另一个页面上，将不再处理事件。

基本上，当我在第 2 页或第 3 页时，不会处理点击事件。 （使用 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");
    });

Answer 1

所有 3 个页面的按钮具有相同的 ID。给他们不同的ID或使用类来绑定事件。

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