2013-04-30 135 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> 
相关问题