title: Click event firing twice or more after history.back() Phonegap
body: <p>I have two html pages in phonegap. <code>index.html</code> and <code>second.html.</code>
  I put all my script in head section.
  In <code>index.html</code> page I put all my Jquery and Ajax codes. Here are some code snippets that I use to change page.</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>     &lt;!DOCTYPE html&gt;
            &lt;html&gt;
              &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
          &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
          &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
          &lt;title&gt;
          &lt;/title&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
          &lt;link rel="stylesheet" href="css/mystyle.css" /&gt;
  
  
  
          &lt;script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"&gt;
          &lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript" src="cordova-2.7.0.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          &lt;/head&gt;
          function callAnothePage(check)
              {
                  $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter="+check, data : { 'paremeter' : check }, reloadPage : false, changeHash : true });
              }
          $(document).on('pageshow', "#second",function () {
                  var parameters = $(this).data("url").split("?")[1];;
                  parameter = parameters.replace("paremeter=","");
                  });
          $(document).on('pageshow', "#index",function () {
                  $(document).on('click', "#news",function () { //Something Something  });
  });
      $(document).on('pageshow', "#second",function () {
       $(document).on('click', "#back",function () {     
  
                  history.back();
              });
      &lt;/script&gt;
  
  
          &lt;body&gt;
          &lt;!-- Home --&gt;
          &lt;div data-role="page" id="index"&gt;
              &lt;div data-role="header"&gt;
                  &lt;h3&gt;
                     Title
                  &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div data-role="content"&gt;
                &lt;img src="img/logo5.png" /&gt;
  
                &lt;a data-role="button" id="news"&gt;News&lt;/a&gt;
  
              &lt;/div&gt; &lt;!--content--&gt;
  
              &lt;div data-role="content"&gt;
              &lt;div&gt;&lt;span class="status"&gt;&lt;/span&gt;&lt;/div&gt;
  
                 &lt;/div&gt; &lt;!--content--&gt;
          &lt;/div&gt;&lt;!--page--&gt; 
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>Something like this. And my</p>
  
  <p><strong>second.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
      &lt;title&gt;
      &lt;/title&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
      &lt;!-- Home --&gt;
      &lt;div data-role="page" id="second"&gt;
          &lt;div data-role="header"&gt;
  
              &lt;div id="new_title"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;div id="news_date" class="mybutton"&gt;&lt;/div&gt;
              &lt;br/&gt;
              &lt;div id="news_description"&gt;&lt;/div&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;a data-role="button" id="back" class="mybutton_back"&gt;Back&lt;/a&gt;
          &lt;/div&gt; &lt;!--content--&gt;
      &lt;/div&gt;&lt;!--page--&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So First time it works fine. All events works fine. It does some work using jquery after button click and goes to <code>second.html</code> page. After viewing <code>second.html</code> I came back using <code>history.back()</code> Then problem starts. All button clicks works twice. All ajax calls are working twice. If I go to second page again and came back, then events fire 3 times and so on. I think <strong>Scripts</strong> are loaded multiple times.</p>
  
  <p>I tried <code>$.mobile.changePage()</code> to get back to <code>index.html</code>. But it gets worse. Then all <code>events</code> fail. No click events or ajax call works if I use that.</p>
  
  <p><em><strong>How to stop this? How can I prevent script to load multiple times?<br>
  OR
  Is there any way so that I can load pages entirely? I mean all previous scripts load will be forgotten?</em></strong></p>