Adding jquery mobile swipe event

Question

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 list

Answer 1

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

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

Answer 2

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});
});

Answer 3

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?

Answer 4

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

Answer 5

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

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