The jQuery button on the mobile phone is distorted when using .show () and .hide ()

Question

When I use .hide () on a button in jQuery mobile, it initially hides the button. when I use the .show () property, the user interface gets distorted. Somehow .button ("refresh"), similar to .listview ("refresh"), does not work.

I recreated the error in jsfiddle link

$('#page1').live('pageshow', function () {
    $("#showbtn1").click(function(){
       $("#btn1").show();
       $("#btn2").hide();
       $.mobile.changePage("#page2");        
    });
    $("#showbtn2").click(function(){
       $("#btn1").hide();
       $("#btn2").show();
       $.mobile.changePage("#page2");     
    });    
});    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet"/>

<div id="page1" data-role="page">

    <div data-role="header">
        <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-rel="back"></a> 
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>To recreate the bug <p>
        <p> 1.click on show button 1 </p>
        <p> 2.click back </p>
        <p> 3.click on show button 2 </p>
        <p> 4.button is distorted </p>
            
        <a id="showbtn1"  href="#" data-role="button">show only button 1</a>
         <a id="showbtn2" href="#" data-role="button">show only button 2</a>           
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
    
<div id="page2" data-role="page">

    <div data-role="header">
        <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-rel="back"></a> 
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <a id="btn1" href="#" data-role="button">button 1</a>
        <a id="btn2" href="#" data-role="button">button 2</a>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Run codeHide result

Any help is appreciated.

Thank you

Answer 1

Method

show() hide() "display: none", , DOM. css ( "", "" ) "", .

Answer 2

, (- ), , , : CSS, / , / :

$('.hide_me').addClass("vanish");
$('.show_me').removeClass("vanish");

css:

.vanish {
  display: none;
}

Answer 3

Try to fix the balance <p>

HTML:

<p>To recreate the bug <p>
<p>To recreate the bug </p>