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

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

1 个答案: