Jquery Mobile Javascript not working on ajax load

Question

Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:

 

<         


        

Answer 1

My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this

Answer 2

You can manually adjust delay time to 500ms and 1s.

$(searchWrapper).delay(1000).slideToggle(); 

Answer 3

Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).

The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.

Also note this comment in the doc which might also be relevant to you:

The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.

http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html