Добавление события jquery mobile swipe

Question

У меня есть просмотр списка, и я пытаюсь добавить событие свайпа в ссылки. Например, если пользователь перелистывает первую ссылку, он переходит на эту страницу. Это возможно с элементами списка. Я пробовал div, href, a, li, ul, но до сих пор не насторожился. Это работает с телом. Спасибо

<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>

Answer 1

Live Пример:

• 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>

Связанный:

• Добавление события разметки JQM в ссылку на просмотр списка

Answer 2

Вы пытались использовать привязку, используя live()?

ОБНОВЛЕНИЕ : .live() устареет, и правильное использование будет .on()

Он прикрепляет обработчик к событию для всех текущих совпадающих элементов , а также тех, которые могут совпадать позже.

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

Рассматривали ли вы использование этой библиотеки для жестов ?

Answer 3

работает, если привязать его непосредственно к элементу управления, например:

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

Answer 4

если вы хотите переход, вам нужно указать, что вы хотите переход, например,

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

Answer 5

Если вы хотите, чтобы страница скользила в естественном направлении, которое пользователь проводит, то сделайте это следующим образом:

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