jQuery mobile .changePage does not work properly

问题:

This is a user login screen, when login successful I want to show another page, this "kinda" works but after successful login I get a mixture of both pages! it is all overlayed. So only when I refresh the page I can see it properly. I also tried to use jQuery version 1.6.4 but didn't help.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/custom.js"></script> <script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>  <script>    $.ajax({    ...    success: function (data){         $.mobile.changePage('account.html');   },     }); </script> 

Also apart from overlay issue on the next page there is a JavaScript code which does not work until I refresh the page.

  $(document).ready(function() {      $(".infoBasic").click(function() {      $(this).next('.infoDetails').slideToggle("50");  });  });  

回答1:

A couple of issues here:

jQuery Mobile 1.1 only work with core jQuery verysions 1.6.4 and 1.7.1 while Mobile 1.2 works with core 1.7.0 and 1.8.2

$(document).ready() is not supported. Use $(document).bind('pageinit') instead. http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Your script references should not start with // but http://

回答2:

You could do this i think:

$.ajax({     ...     success : function(data) {         $('body').empty();         $.mobile.changePage('account.html');     }, }); 

For your second problem, you should use delegation with .on():

$(document).ready(function() {      $(this).on('click',".infoBasic",function() {         $(this).next('.infoDetails').slideToggle("50");     });  }); 

文章来源: jQuery mobile .changePage does not work properly