Analysis of common problems in jquery mobile development_jquery

This article analyzes common problems in jquery mobile development with examples. Share it with everyone for your reference, the details are as follows:

jquery mobile is very powerful. With it, you don’t have to write methods in the program to determine what kind of mobile phone it is. You can use js to achieve compatibility with various smart phones. It is also because of its powerful functions. The jquery mobile plug-in has more than 200 K and the min has more than 140 K.

1. jquery mobile makes page requests through ajax. As everyone knows, ajax does not flush new pages. In other words, changes in the address bar are not real updates. There is a problem. JS will only be executed and work when the page is refreshed. The JS code in the page will work when the page is refreshed. However, if you click the jump in the page, it will not work when you switch back.

Error code:

<script type="text/javascript">
$(function(){
  $('#search01').bind("click",function(){
    $('.searchPanel').show();
  });
});
</script>

Correct code:

<script type="text/javascript">
$(function(){
  $('#search01').live("click",function(){ //jquery 1.7系列
    $('.searchPanel').show();
  });
});
</script>

If it is jquery 1.9 series

<script type="text/javascript">
$(document).on('click', '#search01', function () { //jquery 1.9系列
  $('.searchPanel').show();
});
</script>

2. All pages are in one page. At this time, be careful not to use the same ID, otherwise only the first one will be read. If there are multiple pages in one page, many problems will arise. For example, calculating the distance from the label to the top of the window will be inaccurate.

Wrong spelling:

$('html,body').animate({
   scrollTop: $('.content').offset().top
}, 100);

The problem with writing this way is that the current page may have many pages in front of it, so the top value will be incorrect. If you refresh the page, the value will be correct

Correct writing:

$('html,body').animate({
   scrollTop: $('.ui-page-active .content').offset().top
}, 100);

.ui-page-active indicates the currently active page, so the calculated height is correct.

3. Assigning PHP variables to JS variables sometimes works, sometimes not.

<input type="hidden" id='color' value='<&#63;php echo $color;&#63;>'>
<script type="text/javascript">
  color = $('.ui-page-active #color').val();
</script>

I hope this article will be helpful to everyone in jQuery programming.