get JS to load on JQM page

Question

I am trying to get a plugin to run on JQM, but I need it to wait and load when page two is active. Right now, its loading when it starts up. I have my pages set up with data-role='page'. Here is my code:

$(document).ready(function(){
    $("#two").bind('pageinit')
    jQuery(".namesleft").fitText();
    jQuery(".scoreleft").fitText();
    jQuery(".namesright").fitText();
    jQuery(".scoreright").fitText();
});

thanks in advance for the help

Answer 1

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/F2Gcm/

$(document).on('pageshow', '#index', function(){       
    $("h1").fitText(0.273);
    $(".download").fitText(1);
});

On method should be used instead of live method to bind a page event, live method is deprecated and don't exist in jQuery 1.9+.

Also this should be bound to pageshow event because it wont work in any other case. jQuery Mobile is strict with plugins doing visual changes, that kind of plugins will work only in pageshow event.

If you want a better understanding of jQuery Mobile page events take a look at this ARTICLE, or find it HERE.

Answer 2

jQuery mobile has an alternative to $(document).ready. The code should look something like this:

    <script type="text/javascript">
       $('div:jqmData(role="page")').live('pagebeforeshow',function(){
             // code to execute on each page change
       });
</script>

In fact, jQm has an entire set of event alternatives to regular jQuery events: http://jquerymobile.com/demos/1.2.1/docs/api/events.html

Answer 3

you can add your code in JQM's pageshow event like:

$("#two").live('pageshow', function(){
    $(".namesleft, .scoreleft, .namesright, .scoreright").fitText();
});