jQuery Mobile - Touch Swiperight Event


Fires when the user drags more than 30px over an element in the right direction using id of the page to specify an event and on() method attaches the event handlers.


Following example describes the use of swiperight event in the jQuery Mobile Framework.

<!DOCTYPE html>
      <title>Swiperight Event</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swiperight",function() {
               $("span").text("swipe event occurred!!!");
      <div data-role = "page" id = "page1">
         <div data-role = "header">

         <div data-role = "main" class = "ui-content">
            <p>It will display the text when you swipe right side.</p>
            <span style = "color:orange"></span>

         <div data-role = "footer">


Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_touch_swiperight_event.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_touch_swiperight_event.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started