title: Firing twice when swipeleft and swiperight in jquery mobile?
body: <p>I am new to jQuery mobile. I am using the swipe concept for swiping multiple separate html pages. It's working correctly when I come from swipepage3 to swipepage2. swipepage2 to swipepage1 and swipepage2 to swipepage3, It's firing twice. How to fix this issue?</p>
  
  <p>Here is my code:  </p>
  
  <p><strong>Swipepage1.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Share QR&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="slide.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div data-role="page" id="article1"&gt;
  &lt;div data-role="header" data-theme="b" data-position="fixed" data-id="footer"&gt;
    &lt;h1&gt;Countries&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content" class="contentclass"&gt;
    &lt;p&gt;Newyork&lt;/p&gt;
    &lt;img src="img/newyork.jpg" style="height:460px;width:600px;"/&gt;
  &lt;/div&gt;
  &lt;div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"&gt;
    &lt;h1&gt;Footer&lt;/h1&gt;    
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Swipepage2.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
   &lt;title&gt;Share QR&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
  
  &lt;div data-role="page" id="article2"&gt;
  &lt;div data-role="header" data-theme="b" data-position="fixed" data-id="footer"&gt;
    &lt;a href="swipepage1.html" data-icon="home" data-iconpos="notext"&gt;Home&lt;/a&gt;
    &lt;h1&gt;Countries&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content" class="contentclass"&gt;
    &lt;p&gt;Seoul&lt;/p&gt;
    &lt;img src="img/seoul.jpg" style="height:460px;width:600px;"/&gt;
  &lt;/div&gt;
  &lt;div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"&gt;
    &lt;h1&gt;Footer&lt;/h1&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p><strong>Swipepage3.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;Share QR&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width,height=device-height,minimum-sca le=1,maximum-scale=1"/&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div data-role="page" id="article3"&gt;
  &lt;div data-role="header" data-theme="b" data-position="fixed" data-id="footer"&gt;
    &lt;a href="swipepage1.html" data-icon="home" data-iconpos="notext"&gt;Home&lt;/a&gt;
    &lt;h1&gt;Countries&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content" class="contentclass"&gt;
    &lt;p&gt;Capetown&lt;/p&gt;
    &lt;img src="img/capetown.jpg" style="height:460px;width:600px;"/&gt;
  &lt;/div&gt;
  &lt;div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"&gt;
    &lt;h1&gt;Footer&lt;/h1&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p><strong>slide.js</strong></p>
  
  <pre><code>$(document).on('pagebeforecreate', function() {
  $('#article1').bind('swipeleft', function(event,ui)
  {
      $.mobile.changePage("swipepage2.html", "slide"); 
  });
  
  
  
  $('#article2').bind('swipeleft',  function(event,ui)
  {
      $.mobile.changePage("swipepage3.html","slide");
  });
  
  $('#article2').bind('swiperight',  function()
  { 
      $.mobile.changePage("swipepage1.html","slide"); 
  });
  
  
  
  $('#article3').bind('swiperight', function(event,ui)
  { 
      $.mobile.changePage("swipepage2.html","slide"); 
  });
  });
  </code></pre>