Jquery Mobile pageshow function

Question

I am building a webapp using the jqm framework and I have been attempting to use the pageshow function when including a jQuery widget, k3dcarousel. On the page in question, I have my script underneath the data-role="page" div,

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

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

Am I using the pageshow logic wrong? Is there a better way to achieve what I am attempting to do: AJAX this page into my mobile framework.

I understand this is a rather specific question, but hopefully there is a generic answer to this, as it seems to me that this could happen to any widget.

Any help is greatly appreciated, I can paste more code if that helps.

Thank you for your time.

Answer 1

Since you are binding to the pageshow event, the anonymous function will fire everytime you view the page. If you only want to call the code on the first view of the page then either bind to the pagecreate/pageinit events or check for the existence of the k3dCarousel in your 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 jQuery Mobile specific events: http://jquerymobile.com/demos/1.0rc3/docs/api/events.html