Jquery持久頁腳按鈕切換後頁面不工作

我正在使用基於多頁html文件的Jquery/mobile的Phonegap應用程序，使用標題的固定標題和工具欄的固定頁腳鈕釦。這個想法是，通過單擊頁腳上的向前/向後按鈕，用戶將執行幾個步驟，刷新每個頁面中的數據塊，以便它們可以在特定步驟的不同「塊」之間來回滑動。通過提取用於處理按鈕的JQuery到單獨的函數中，我已經整理了我的代碼，然後在顯示每個子頁面時調用這個AIUI。問題是，因爲我這樣做了，我的前進/後退按鈕似乎只在第一頁上工作。任何想法，我可能會出錯？Jquery持久頁腳按鈕切換後頁面不工作

相關的html：

<body onload="onBodyLoad()"> 

<div data-role="page" id="page1" class="page"> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    InitRightBar(); 
    InitLeftBar(); 
    ReloadText(); 
    InitBackButton(); 
    InitForwardButton(); 
    }); 
    </script> 

<div data-role="header" data-id="fixedheader" data-position="fixed" > 
    <h1>Fixed header</h1> 
</div><!-- /header --> 

<div data-role="content"> 
    <div id="contentview"> 
     <a href="#page2" data-transition="flip">Linky</a> 
    </div> 
    <div id="rightbar"> 
     <img src="images/Testbar.png"> 
    </div> 
</div><!-- /content --> 

<div data-role="footer" data-id="fixedfooter" data-position="fixed"> 
    <a id = "BackButton" href="#">Back</a> 
    <a id="ForwardButton" href="#">Forward</a> 
</div><!-- /footer --> 
</div><!-- /page1 --> 

<div data-role="page" id="page2" class="page"> 

<script type="text/javascript"> 
    $(document).ready(function() { 
      InitRightBar(); 
      InitLeftBar(); 
      ReloadText(); 
      InitBackButton(); 
      InitForwardButton(); 
      }); 
    </script>   

    <div data-role="header" data-id="fixedheader" data-position="fixed" > 
     <h1>Fixed header</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
    <div id="leftbar"> 
     <img src="images/Testbar.png"> 
    </div> 
    <div id="mainview"> 
     <blockquote id="blocktext"> 
      <p>Hello world</p> 
      <p><a href="#page1" data-transition="flip">Linky</a></p> 
     </blockquote> 
    </div> 
    </div><!-- /content --> 

    <div data-role="footer" data-id="fixedfooter" data-position="fixed"> 
     <a id = "BackButton" href="#">Back</a> 
     <a id = "ForwardButton" href="#">Forward</a> 
    </div><!-- /footer --> 
</div><!-- /page2 --> 
</body>

我能提供的各個功能，如果它是有幫助的，但到目前爲止，我可以告訴使用警報，這個問題應該是介於在這裏 - 在按鈕的第二頁簡單AREN不會變得活躍/可點擊...

無論如何，在此先感謝！賈爾斯

*更新迴應克里斯的評論：

感謝您的建議 - 我已經試過禁用腳本2頁，它並沒有什麼差別，但我不知道這是因爲它們實際上是多餘的，或者是因爲我遇到的全部問題（我認爲我需要初始化按鈕，因爲當用戶滑動或鏈接到該頁面時，該頁面只會加載到DOM）

我無法真正看到任何事情來澄清第二頁上的固定頁眉/頁腳的元素是從第一頁實際保留的還是簡單地重複輸入所以我認爲我必須分別編碼它們是「新」元素，並試圖相應地初始化它們......這是錯誤的嗎？

代碼爲按鈕功能如下：

function InitBackButton(){ 
    $("#BackButton").click(function(event){ 
          alert("triggered!") 
       event.stopImmediatePropagation() 
       if (counter >0) 
        {counter -=1; 
        $("#blocktext").html(pagecontent[counter][0]); 
       } 
    }); 
}   

function InitForwardButton(){ 
$("#ForwardButton").click(function(event){ 
          event.stopImmediatePropagation()  
          if (counter < 3) 
          {counter +=1; 
          $("#blocktext").html(pagecontent[counter][0]); 
          } 
          }); 
}

來源

2012-06-17 user1459465

您正在加載文檔.ready（）和相關方法在同一個文件中兩次。你有沒有嘗試刪除第2頁的代碼？初始化方法運行兩次似乎是多餘的。這兩個函數中的代碼是什麼：InitBackButton（）; InitForwardButton（）; – chrisvillanueva

感謝您的建議，克里斯，儘管它似乎不是解決方案 - 請參閱我對原始問題的擴展！ – user1459465

明白了！

訣竅是使用「on」將事件處理程序綁定到「on」函數的「selector」字段中，而不是在開始處。這種方式的綁定適用於當前和未來在DOM中按鈕名稱的出現...

這可能會對大多數人顯而易見，但不是像我這樣的新手，所以這裏是清晰的代碼：

這工作：在

$("#ForwardButton").on("click", function(event){ 
           StepForward(); 
           }); 
$("#BackButton").on("click", function(event){ 
          StepBack(); 
          });

有了這個地方：

$("body").on("click", "#ForwardButton", function(event){ 
           StepForward(); 
           }); 
$("body").on("click", "#BackButton", function(event){ 
          StepBack(); 
          });

這不（不會找到ForwardButton和後退按鈕後來創建的實例）第一頁的開始，克里斯關於冗餘的觀點被證明是正確的 - 事實上，現在我可以將「初始化」例程與我的其餘腳本一起移回到我的html頭部中...

來源

2012-06-18 09:17:21 user1459465

Jquery持久頁腳按鈕切換後頁面不工作

回答

相關問題