Jquery persistent footer buttons don't work after switching pages
<p>I'm working on a Phonegap app with Jquery/mobile based around a multi-page html file, using a fixed header for the title and a fixed footer for a toolbar with buttons. The idea is that by clicking forward/back buttons on the footer, the user moves through several steps, refreshing the chunks of data in each page, so they can swipe back and forth between the different "chunks" for that particular step.</p>

<p>Having got most of the loose ends ironed out, I've been tidying u my code by extracting the JQuery for handling the buttons into separate functions, which AIUI I then call for each subpage as it displays. The problem is that since I've done this, my forward/back buttons only  seem to be working on the first page. Any ideas where I might be going wrong?</p>

<p>Relevant html:</p>

<pre><code>&lt;body onload="onBodyLoad()"&gt;

&lt;div data-role="page" id="page1" class="page"&gt;

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

&lt;div data-role="header" data-id="fixedheader" data-position="fixed" &gt;   
    &lt;h1&gt;Fixed header&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

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

&lt;div data-role="footer" data-id="fixedfooter" data-position="fixed"&gt;
    &lt;a id = "BackButton" href="#"&gt;Back&lt;/a&gt;
    &lt;a id="ForwardButton" href="#"&gt;Forward&lt;/a&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page1 --&gt;

&lt;div data-role="page" id="page2" class="page"&gt;

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

    &lt;div data-role="header" data-id="fixedheader" data-position="fixed" &gt;   
        &lt;h1&gt;Fixed header&lt;/h1&gt;
    &lt;/div&gt;&lt;!-- /header --&gt;

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

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

<p>I can supply the individual functions if it's helpful, but so far as I can tell using alerts, the issue is probably somewhere in here - the buttons for the second page simply aren't becoming active/clickable...</p>

<p>Anyway, thanks in advance! Giles</p>

<p><em>*</em> Update responding to Chris's comment:</p>

<p>Thanks for the suggestion - I've tried disabling the script for page 2, and it doesn't make any difference, but I'm not sure if that's because they're actually redundant, or because of the overall problem I'm having (I thought I needed to initialise the buttons because that page would only be loaded to the DOM when the user swipes or links across to it?) </p>

<p>I can't really see anything to clarify whether the elements of the fixed header/footer on the second page are actually retained from the first page, or simply duplicated-in-place, so I assumed from the fact I had to code them separately that they were "new" elements and was trying to initialise them accordingly... Is this wrong?</p>

<p>Code for the button functions is as follows:</p>

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

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