Adding jquery mobile swipe event

I have a listview and what I am trying to do is add a swipe event on the links. For example, if a user swipes the first link it goes to that page. Is this possible with lis开发者_开发百科tview elements. I have tried div,href,a,li,ul but still no alert. It works with body. Thanks

<div>
  <ul data-role="listview" data-inset="true">
   <li class="rqstpage"><a href="./requests.php">Requests</a></li>
   <li><a href="./speakers.php" data-transition="pop">Control Panel</a></li>
   <li><a href="./schedule.html">Schedule</a></li>
   <li><a href="./information.html">Information</a></li>
  </ul>
</div>


<script>
$("div ul li.rqstpage").bind('swipe',function(event, ui){
  $.mobile.changePage("requests.php", "slide");
});
</script>

Live Example:

• http://jsfiddle.net/yxzZf/4/

JS:

$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <p>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li id="listitem">Swipe Right to view Page 1</li>
            </ul>
        </p>
    </div>
</div>

<div data-role="page" id="page1"> 
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c">
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Back to the Home Page</a></li>
        </ul>

        <p>
            Yeah!<br />You Swiped Right to view Page 1
        </p>
    </div>
</div>

Related:

• Adding JQM swipe event to listview link

Have you tried using binding using live()?

UPDATE: .live() will be deprecated and the correct usage is .on()

It attaches the handler to the event for all current matching elements as well as those that might match later on.

pageCreate() {
  $(parent).on('swipe', 'li.rqstpage', function() {
     $.mobile.changePage("requests.php", "slide");
  }
}

Have you considred using this library for gestures?

does it work if you bind it directly on the control, like so:

pageCreate() {
  $("li.rqstpage").swipe() {
     $.mobile.changePage("requests.php", "slide");
  }
}

If you want the page to slide in the natural direction that the user swipes, then do it like this:

// For a left swipe: page slides from right to left
$('#listitem').on('swipeleft', function() {
    $.mobile.changePage('#page-to-left', { transition: slide});
});

// For a right swipe: page slides from left to right (add "reverse: true")
$('#listitem').on('swiperight', function() {
    $.mobile.changePage('#page-to-right', { transition: slide, reverse: true});
});

if you want transition you need to specify that you want transition also such as

$.mobile.changePage('#page1', { transition: 'flip' });