Swipeleft/swiperight not working

问题

I'm making a presentation for the iPad. I want to use the swipeleft and swiperight from the jquery-mobile library.

At the moment I'm testing everything in google chrome. I did enable 'Emulate touch screen'

My problem: I don't get a message in the console, so the swipe doesn't work.

The versions I'm using:

jquery: jquery-2.1.1.js and jquery-mobile: jquery.mobile-1.4.5.js

$(document).ready(function(){
   // Previous/next slide on swipe
   $('.bg, header').on('swipeleft', function(e){
      console.log("swipe left");
   });
   $('.bg, header').on('swiperight', function(e){
      console.log("swipe right");
   });
});

My jade code:

header
    h1
      | Title

  .body
    img(src="#{baseUrl}img/bodybg.jpg", alt="body").bg

If I do the following (bind and touchend), I get 'swipe left/swipe right' in the console:

$(document).ready(function(){
   // Previous/next slide on touchend
   $('.bg, header').bind('touchend', function(e){
      console.log("touchend");
   });
   $('.bg, header').bind('touchend', function(e){
      console.log("touchend");
   });
});

But I don't want to use touchend, I want to use swiperight and swipeleft! What am I missing here?N

回答1:

Change:

$('.bg, header').on('swipeleft', function(e){
  console.log("swipe left");
});

$('.bg, header').on('swiperight', function(e){
  console.log("swipe right");
});

to:

$(document).on('swipeleft', '.bg, header',function(e){
  console.log("swipe left");
});

$(document).on('swiperight', '.bg, header',function(e){
  console.log("swipe right");
});

This way you are delegating swipe event, it doesn't matter if '.bg, header' are loaded into the DOM or not.

Working example: http://jsfiddle.net/qtfathho/

来源：https://stackoverflow.com/questions/27619467/swipeleft-swiperight-not-working