2013-04-30 3 views
1

Я занимаюсь проектом phonegap с каркасом JQM.Функция Работает с JQuery 1.6.4, не работает с JQuery 1.9.1

В этом проекте я пытаюсь сделать меню навигации со стрелкой влево (чтобы открыть) и проведите пальцем вправо (чтобы закрыть).

Коды отлично работают на JQuery 1.6.4.

Но когда я импортирую Jquery 1.9.1 в свой проект, он не работает. Щелчок кнопки работает, но проведите пальцем по экрану.

Dont скажите мне продолжать с 1.6.4, пожалуйста, мне нужна помощь :)

Вот функция у меня есть;

$(function(){ 
    var menuStatus; 

    $("a.showMenu").click(function(){ 
     if(menuStatus != true){    
     $(".ui-page-active").animate({ 
      marginLeft: "265px", 
      }, 300, function(){menuStatus = true}); 
      return false; 
      } else { 
      $(".ui-page-active").animate({ 
      marginLeft: "0px", 
      }, 300, function(){menuStatus = false}); 
      return false; 
      } 
    }); 

    $('.pages').live("swipeleft", function(){ 
     if (menuStatus){  
     $(".ui-page-active").animate({ 
      marginLeft: "0px", 
      }, 300, function(){menuStatus = false}); 
      } 
    }); 

    $('.pages').live("swiperight", function(){ 
     if (!menuStatus){ 
     $(".ui-page-active").animate({ 
      marginLeft: "265px", 
      }, 300, function(){menuStatus = true}); 
      } 
    }); 

    $("#menu li a").click(function(){ 
     var p = $(this).parent(); 
     if($(p).hasClass('active')){ 
      $("#menu li").removeClass('active'); 
     } else { 
      $("#menu li").removeClass('active'); 
      $(p).addClass('active'); 
     } 
    }); 

}); 

Тэги: теги;

<body> 
     <div id="menu"> 
     <h3>Menu</h3> 
      <ul data-role="listview" data-theme="d"> 
       <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li> 
      </ul> 
     </div> 

     <div data-role="page" class="pages" id="home"> 
      <div data-role="header"> 
      <a href="#"class="showMenu" data-icon="grid" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a> 
       <h1>Loreee</h1> 
      </div><!-- /header --> 
      <div data-role="content"> 
       <p><strong>Note: You can swipe right/left to show/close menu.</strong></p> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
      </div><!-- /content --> 
      <div data-role="footer" data-position="fixed"> 
       <h1>footer</h1> 
      </div> 
     </div><!-- /page --> 
</body> 

Ожидание ваших ответов. Благодарю.

+2

'.live' больше не используется, он был заменен на'. on' – tymeJV

+0

.live был устарел с 1,7 и полностью удален с 1.9. '.on' - это путь. –

+0

Я искал ее, я знал, что это что-то вроде этого. Благодарю. –

ответ

7

Замените .live на .on так. Изменить

$('.pages').live("swipeleft", function(){ 

Для

$(document).on("swipeleft", ".pages", function() { 
    //code here 
}); 
+1

спасибо за ответ mate –

+0

Вы также можете использовать .bind(), но .on() также может выполнять делегирование событий и является предпочтительным. – Pitto

0

Чтобы выяснить проблемы несовместимости можно использовать JQuery перенастройки инструмент:

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> 
Смежные вопросы