obtenir le chargement de JS sur la page JQM

Question

J'essaie de faire fonctionner un plugin sur JQM, mais j'ai besoin qu'il attende et se charge lorsque la page deux est active. Pour l'instant, il se charge au démarrage. J'ai configuré mes pages avec data-role='page' . Voici mon code :

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

Merci d'avance pour votre aide

Answer 1

JQuery mobile propose une alternative à $(document).ready . Le code devrait ressembler à ceci :

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

En fait, jQm dispose d'un ensemble complet d'événements alternatifs aux événements jQuery habituels : http://jquerymobile.com/demos/1.2.1/docs/api/events.html

Answer 2

Voici un exemple fonctionnel de jsFiddle : http://jsfiddle.net/Gajotres/F2Gcm/

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

Sur doit être utilisée à la place de la méthode vivre pour lier un événement de page, vivre est obsolète et n'existe plus dans jQuery 1.9+.

Il devrait également être lié à pageshow car il ne fonctionnera dans aucun autre cas. jQuery Mobile est strict avec les plugins qui font des changements visuels, ce type de plugins ne fonctionnera que dans l'événement pageshow événement.

Si vous souhaitez mieux comprendre les événements de page de jQuery Mobile, jetez un coup d'œil à ce qui suit ARTICLE ou le trouver ICI .

Answer 3

Vous pouvez ajouter votre code dans l'événement pageshow de JQM comme suit :

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