jQuery Forum

Ok, I am having some issues with a piece of custom code I am trying to use with jQuery Mobile.

I am running jQuery verions 1.8.2 and jQuery Mobile version 1.2.0.

I am trying to get the menu to drop down when the button is clicked and hide when it is clicked again(Code Below).

On the first page, or on a hard refresh the script will work correctly, but, once I navigate to one of the pages from the menu I can no longer get the menu to appear. However, with the console.logs I added in I can see that the script is still running, it just isn't making the menu appear.

I am at a loss of how else to troubleshoot the issue and would really appreciate some help! If you need me to clarify something or if I forgot a piece of information please let me know.

Thanks!

Here is a bit of my code

1. <div data-role="page">
   
       <div data-role="header" data-theme="e">
   
           <a href="#" data-theme="custom-header-button" data-corners="false" data-shadow="false" data-iconshadow="false" class="menu-button">Menu</a>
   
       </div><!-- data-role="header" -->
   
       <div data-role="content" data-theme="e">   
           <div id="custom-menu">
               <ul data-role="listview" data-theme="f" data-inset="false">
                   <li><a href="/mobile/index.php">Home</a></li>
                   <li><a href="/mobile/services.php">Services</a></li>
                   <li><a href="/mobile/about.php">About</a></li>
                   <li><a href="/mobile/gallery.php">Gallery</a></li>
                   <li><a href="/mobile/contact.php">Contact</a></li>
               </ul>
           </div>
       <script>
               $('a.menu-button').click(function(){
                   console.log('Click');
                   if ( $('#custom-menu').is(':hidden') ){
                       $('#custom-menu').show();
                       console.log('Show' + $('#custom-menu') );
                   } else {
                       $('#custom-menu').hide();
                       console.log('Hide');
                   }
               });  //Click function
           </script>
   
   </div><!-- /content -->
   </div><!-- data-role="page" -->