2013-04-30 138 views
1

我正在做帶JQM框架的phonegap項目。函數與Jquery 1.6.4一起使用,不能與Jquery 1.9.1一起工作

在這個項目上,我試圖做一個左側滑動(打開)和右側滑動(關閉)的導航菜單。

該代碼在Jquery 1.6.4上運行良好。

但是,當我將Jquery 1.9.1導入到我的項目中時,它不起作用。按鈕點擊工程,但刷卡沒有。

不要告訴我繼續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 2013-04-30 14:12:06

+0

.live從1.7開始已被棄用,並從1.9版本完全刪除。 '.on'是現在走的路。 – 2013-04-30 14:13:25

+0

我正在谷歌它,我知道那是這樣的。謝謝。 – 2013-04-30 14:14:41

回答

7

替換.live.on像這樣。變化

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

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

感謝您的回答隊友 – 2013-04-30 14:14:58

+0

您也可以使用.bind(),但.on()也可以做事件委託,並且是首選。 – Pitto 2013-04-30 14:44:53

0

要找出不兼容的問題,你可以使用jQuery的遷移工具:

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> 
相關問題