Swipeleft / swiperight不工作 [英] Swipeleft/swiperight not working

问题描述

我正在为iPad做演示。我想使用jquery-mobile库中的swipeleft和swiperight。

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

目前我正在测试Google Chrome中的所有内容。我确实启用了'模拟触摸屏'

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.

我正在使用的版本：

jquery ：jquery- 2.1.1 .js和 jquery-mobile ：jquery.mobile- 1.4.5 .js

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

我的玉代码：

header
    h1
      | Title

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

如果我执行以下操作（bind和touchend），我会在控制台中向左滑动/向右滑动：

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

但我不想使用touchend，我想使用swiperight和swipeleft！我在这里缺少什么？N

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

推荐答案

更改：

$('.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");
});

这种方式你委托刷卡事件，如果'.bg，header'是无关紧要的是否加载到DOM中。

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

工作示例： http://jsfiddle.net/qtfathho/

这篇关于Swipeleft / swiperight不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！