Trượt trên thiết bị di động jQuery không hoạt động

Tôi đang làm việc để tạo thư viện hình ảnh của riêng mình cho một dự án. Đối với điều đó tôi cần sự kiện swipe. Vì vậy, tìm thấy mã dưới đây trên jsfiddle. Đã chèn tất cả các tệp cần thiết. Nó cho thấy danh sách và tất cả .. Nhưng vẫn swipe không hoạt động.? Tôi có viết mã jquery ở đúng chỗ không? Hoặc có điều gì đó sai? Here`s mã của tôi:Trượt trên thiết bị di động jQuery không hoạt động

<html> 
     <head> 
     <meta charset="utf-8" /> 
     <title>Home</title> 
     <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions--> 
     <meta name="viewport" 
      content="width=device-width, initial-scale=1, maximum-scale=1" /> 

     <link rel="stylesheet" type="text/css" href="Css/style.css" /> 
     <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" /> 
     <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" /> 
     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 

     <script type="text/javascript" src="Javascript/jquery1.js"></script> 
     <script type="text/javascript" src="Javascript/jquery2.js"></script> 
     <script type="text/javascript" src="css/jq1.6.2.js"></script> 

     <script type="text/javascript"> 
     $("#listitem").swiperight(function() { 
      $.mobile.changePage("#page1"); 
     }); 
     </script> 

     </head> 
     <body> 

      <div data-role="page" id="home"> 
      <div data-role="content"> 

        <ul data-role="listview" data-inset="true"> 
         <li id="listitem"> Swipe Right to view Page 1</a></li> 
        </ul> 

      </div> 
     </div> 

     <div data-role="page" id="page1"> 
      <div data-role="content"> 

       <ul data-role="listview" data-inset="true" data-theme="c"> 
        <li id="listitem">Navigation</li> 

       </ul> 

       <p> 
        Page 1 
       </p> 
      </div> 
     </div> 

     </body>

Nguồn

2013-02-18 Ashwin

Điều gì là bí ẩn? Bạn có thực sự thêm tệp vào máy chủ của mình không? Bất kỳ lỗi nào trong bảng điều khiển nếu bạn nhìn vào một máy tính bình thường – mplungjan

Mã này thậm chí không hoạt động đối với tôi, ngay cả khi tôi áp dụng giải pháp được chấp nhận – Black

Hãy thử với pageinit handler cho jQuery di động:

$(document).on('pageinit', function(event){ 
    $("#listitem").swiperight(function() { 
     $.mobile.changePage("#page1"); 
    }); 
});

Docs for pageinit @ jquery di động.

Từ các tài liệu:

Take a look at Configuring Defaults

Bởi vì sự kiện jquery-mobile được kích hoạt ngay lập tức, bạn sẽ cần phải ràng buộc xử lý sự kiện của bạn trước khi jQuery Mobile được tải. Liên kết đến tập tin JavaScript của bạn theo thứ tự sau đây:
<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

Nguồn

2013-02-18 09:39:30 Jai

Cảm ơn bạn jai .. It 's working :) – Ashwin

Tôi không thích thực tế là bạn đang nhầm lẫn với pageinit với mobileinit. Ngay cả khi cá nhân bạn không nhầm lẫn cả hai, câu trả lời của bạn là về pageinit và sau đó bạn trích dẫn điều gì đó về mobileinit. Downvote từ tôi. – TigOldBitties

thưa bạn chỉ cần lưu lại cho tôi những giờ đau đầu –

-2

này được lái xe cho tôi hạt too..I không cần phải sử dụng .Trên ('pageinit') như đề xuất trong bài trước. Hóa ra cú pháp của tôi là chính xác trong JQuery của tôi, nhưng CASE SENSITIVTY là vấn đề của tôi. 'swiperight' không hoạt động, nhưng 'swipeRight' đã làm! Mã bên dưới hoạt động đối với tôi và cũng đã khắc phục sự cố Trượt ngăn kéo lên và xuống trong trình duyệt trên thiết bị di động. Hãy chắc chắn chỉ định các phương thức swipeRight và swipeLeft một cách riêng biệt thay vì một lớp 'vuốt' chung chung và bạn tốt để đi! * Hãy lưu ý dòng Exclude Elements ở dưới cùng, chú ý rằng tôi lấy 'span' ra khỏi danh sách, để cho phép vuốt trên phần tử span được sử dụng phổ biến.

$(function() { 

     $('.yourclassname').swipe( 
     { 
     swipeLeft:function(event, direction, distance, duration, fingerCount) 
     { 
      // do your swipe left actions in here, animations, fading, etc.. 
      alert(direction); 
     }, 
     swipeRight:function(event, direction, distance, duration, fingerCount) 
     { 
      // do your swipe right actions in here, animations, fading, etc.. 
      alert(direction); 
     }, 
     threshold:4, 
     // set your swipe threshold above 

     excludedElements:"button, input, select, textarea" 
     // notice span isn't in the above list 
     }); 
});

Nguồn

2015-06-17 02:58:14 Victor

Câu hỏi là về 'jQuery mobile' và không phải là' touchSwipe library' -1 –

Trượt trên thiết bị di động jQuery không hoạt động

Trả lời

Các vấn đề liên quan