JQuery Mobile - showwash event fire only once

Question

I try to execute a JS snippet only once, after the page is fully loaded, and JQM has taken care of all the ui modifications (i.e. lists, buttons, etc.). I want it to be executed only on this page, and not on subsequent pages.

What I tried first was

<script> $('[data-role=page]').live("pageshow", function() { alert("Ready!"); }); </script> 

This is because the function is now bound to the page div and is executed every time any subsequent page is displayed. However, I want this to be done only once and only for the page containing this JS snippet.

Is there any way to listen to the showhow event, without binding functions to it.

The only way I was able to do this was to snap and unlock as follows:

 <script> $('[data-role=page]').bind("pageshow.test", testfun); function testfun() { alert("Ready!"); $('[data-role=page]').unbind("pageshow.test", testfun); } </script> 

But is there a more elegant way to do this?

Answer 1

jQuery has a one function to bind an event handler that will only execute once. Check out the link.

Answer 2

The pageinit event fires once per page immediately after the jQuery Mobile environment initializes its widgets; I think this may be what you are looking for.

pageinit

It is initialized on the initial page after initialization. We recommend that you bind to this event instead of ready () DOM, because it will work regardless of whether the page is loaded directly or if the content is transferred to another page as part of the Ajax navigation system.

Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

If you want to be attached to a specific page, and not to the others, select only the page you want to change ... Here is an example:

 <script> $(document).delegate('#my-page-id', 'pageinit', function() { alert("PageInit!"); }); </script>