title: swiperight function is not working
body: <p>I am new to jquery. I follow this <a href="https://www.w3schools.com/jquerymobile/event_swiperight.asp" rel="nofollow noreferrer">link</a> to learn the swipe right function. I tried to apply swipe right function in my project. However, it does not have any response when I swipe right. I want the swipe right function triggered when I swipe right at any location of this page. I do not know which part is going wrong. Here is my code. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;title&gt;Tinder-like Marketplace - Mobile Shop Template&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta content="IE=edge" http-equiv="x-ua-compatible"&gt;
      &lt;meta content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport"&gt;
      &lt;meta content="yes" name="apple-mobile-web-app-capable"&gt;
      &lt;meta content="yes" name="apple-touch-fullscreen"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/responsive.css"&gt;
      &lt;link rel="shortcut icon" href="images/favicon.png"&gt;
      &lt;link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  $("body").on("swiperight",function(){
    alert("swipe right");
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="initSwipe()"&gt;
  
  &lt;div id="main"&gt;
  
      &lt;!-- MAIN PAGE --&gt;
      &lt;div id="page"&gt;
  
  
          &lt;!-- CONTENT CONTAINER --&gt;
          &lt;div class="content-container"&gt;
  
              &lt;!-- Product Header --&gt;
              &lt;div class="content-header"&gt;
  
                  &lt;div class="product-title animated fadeIn" id="productName"&gt;
  
                  &lt;/div&gt;&lt;!-- Product title --&gt;
  
                  &lt;img src="images/240x240.png" alt="img" /&gt;
  
                  &lt;!-- Product meta --&gt;
                  &lt;div class="product-meta animated fadeInUp"&gt;
                      &lt;div class="product-title animated fadeIn"&gt;$&lt;/div&gt;
                      &lt;div class="product-title animated fadeIn" id="productPrice"&gt;
  
                      &lt;/div&gt;
                   &lt;/div&gt;      
  &lt;/div&gt;
           &lt;div class="line"&gt;&lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;!-- END CONTENT CONTAINER --&gt;
  
  
          &lt;div id="swipeLike" class="main-bg"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div id="swipeUnlike" class="main-bg"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;
       &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="js/jquery-3.1.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/slick.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.slicknav.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.swipebox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/swipe.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>