Question

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

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

我的问题：我在控制台中没有收到消息，因此滑动不起作用。

我正在使用的版本：

jquery ：jquery- 2.1.1 .js和 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），我会在控制台中“向左滑动/向右滑动”：

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

Answer 1

变化：

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

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

为：

$(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中都无关紧要。

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

Swipeleft / swiperight无法正常工作

1 个答案: