javascript - 如何使用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 或使用类来绑定(bind)事件。

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