JQuery Mobile Browsing Feature

Question

I am creating a webapp using the jqm framework, and I am trying to use the pageshow function when I enable the jQuery widget, k3dcarousel. On the page in question, I have a script under the data-role="page" div,

 $("#page-about").live( "pageshow", function (event) { $('#k3dCarousel_portrait').k3dCarousel(); } ); 

It seems I need to double-click on my link to load the JS function, which would make me think that I am using this function incorrectly. Also, if I don't use $("#page-about").die(); the function under the pageshow function, the script will load several times if I click back, and then click the link again.

Am I using pageshow logic incorrectly? Is there a better way to achieve what I'm trying to do: AJAX this page in my mobile structure.

I understand that this is a rather specific question, but I hope there is a general answer to this question, since it seems to me that this can happen with any widgets.

Any help is much appreciated, I can insert more code if that helps.

Thank you for your time.

Answer 1

Since you are attached to the pageshow event, an anonymous function will fire every time you view the page. If you only want to call the code on the first page view, either bind to the pagecreate/pageinit , or check for the presence of k3dCarousel in the pageshow code:

 $("#page-about").live( "pageshow", function (event) { //check for the existence of HTML within the container element if ($('#k3dCarousel_portrait').html().length == 0) { $('#k3dCarousel_portrait').k3dCarousel(); } } ); 

Here is an explanation of all the specific jQuery Mobile events: http://jquerymobile.com/demos/1.0rc3/docs/api/events.html