How to load jqtouch on-demand

Question

I'm trying to load jqtouch on-demand like so:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $.getScript("js/jqtouch.min.js", function() {
             $.jQTouch();
        });
    });     
</script>

Firebug outputs: $(_3c.selector).tap is not a function

If I include jqtouch.min.js in a script, like I did for jquery.js and call $.jQtouch, everything will work correctly. However, I'd like to load jqtouch only when I need to, however I can't seem to get it to work. I also tried doing an ajax post to jqtouch.min.js and received the same error.

Answer 1

When you load the jqtouch script on-demand, the $(document).ready event fires before the script is loaded, so the jqtouch initialization script is never executed.

The solution sucks....you have to modify the jqtouch script initialization binding from

$(document).ready(function(){...})

to

$(document).bind('ready',function(){...})

...and you have to modify your own code to fire the ready event after loading the script

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $.getScript("js/jqtouch.min.js", function() {
             $(document).trigger('ready');
             $.jQTouch();
        });
    });     
</script>