jQuery Mobile swipe not working

jquery, jquery-mobile

Solution

Try with `pageinit` handler for jQuery mobile:

$(document).on('pageinit', function(event){
   $("#listitem").swiperight(function() {
        $.mobile.changePage("#page1");
    });
});

Docs for pageinit @ jquery mobile.

From the docs:

Take a look at Configuring Defaults

Because the jquery-mobile event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>  
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Problem

I am working on to create my own image gallery for a project. For that I need swipe event. So found the below code on jsfiddle. Inserted all the necessary files. It shows the list and all.. But still the swipe is not working.? Am I writing the jquery code in the right place? Or something wrong? Here`s my code: ``` <html> <head> <meta charset="utf-8" /> <title>Home</title> <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" type="text/css" href="Css/style.css" /> <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" /> <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" /> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="Javascript/jquery1.js"></script> <script type="text/javascript" src="Javascript/jquery2.js"></script> <script type="text/javascript" src="css/jq1.6.2.js"></script> <script type="text/javascript"> $("#listitem").swiperight(function() { $.mobile.changePage("#page1"); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li id="listitem"> Swipe Right to view Page 1</a></li> </ul> </div> </div> <div data-role="page" id="page1"> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c"> <li id="listitem">Navigation</li> </ul> <p> Page 1 </p> </div> </div> </body> ```

Original source