Unterschied zwischen $(document).ready und $(document).on('pageinit')

Verwandte:

Diesen Artikel finden Sie auch als einen Teil von meinem blog HIER.

Lösung

Zunächst einmal alles, was Sie brauchen, um zu verstehen, jQM-Seite Ereignisse und deren flow .

$(document).on('pageinit',function(){
    $.mobile.loading( 'show' );
});

ist in der Tat ein Ersatz für:

$(document).ready(function () {
    $.mobile.loading('show');
});

aber jQM-Seite besteht aus einigen Phasen. In Ihrem Fall, in der Lage sein zu zeigen, ein spinner, die Sie verwenden müssen pageshow-Ereignis. Seite muss gezeigt werden können, um zu zeigen, spinner. Ich habe ein Beispiel erstellt für Sie: http://jsfiddle.net/Gajotres/Nncem/. In ihm gehen Sie zur nächsten Seite, um zu sehen, ein spinner. Sie können auch ersetzen pageshow mit pageinit zu sehen, ein Unterschied.

Verwenden Sie diesen code:

$(document).live('pageshow', function (e, data) {
    $.mobile.loading('show');
});  

Aber auch dies ist nicht die richtige Weise, am besten jQM Weg ist, um diese syntax verwenden:

$('div[data-role="page"]').live('pageshow', function (e, data) {
    $.mobile.loading('show');
});    

Oder wenn Sie möchten, binden Sie es auf einer einzelnen Seite verwenden:

$('#pageID').live('pageshow', function (e, data) {
    $.mobile.loading('show');
});  

Wo die pageID ist die ID Ihrer Seite.

$(document).on('pageinit') vs $(document).ready()

Das erste, was Sie lernen, in jQuery ist der Aufruf-code, der in der $(document).ready () - Funktion, so wird alles ausgeführt, sobald das DOM geladen ist. Jedoch, in jQuery Mobile, Ajax verwendet wird, laden Sie den Inhalt jeder Seite in den DOM, wie Sie navigieren. Aufgrund dieser $(document).ready() auslösen wird, bevor die erste Seite geladen ist und jeder Kodex-Seite manipulation wird ausgeführt, nachdem eine Seite aktualisiert werden muss. Dies kann ein sehr subtiler Fehler. Auf einigen Systemen kann es vorkommen, dass es funktioniert, aber auf anderen kann es zu erratischen, schwer zu wiederholen Verrücktheit zu kommen.

Klassischen jQuery-syntax:

$(document).ready() { 

});

Um dieses problem zu lösen (und glaubt mir, das ist ein problem) jQuery Mobile Entwickler erstellte Seite Veranstaltungen. In einer nussschale Seite Ereignisse werden Ereignisse ausgelöst, die in einem bestimmten Punkt auf der Seite der Ausführung. Einer dieser Seite-events ist eine pageinit event und wir können es verwenden, wie diese:

$(document).on('pageinit', function(){

});

Wir können sogar noch weiter gehen und verwenden Sie eine Seiten-id anstelle des Dokument-Selektor. Können sagen, wir haben ein jQuery Mobile-Seite mit einer id index:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

Ausführen von code, der nur die index-Seite wir könnten diese syntax verwenden:

$('#index').on('pageinit', function(){

});

Pageinit Ereignis wird jedes mal ausgeführt, wenn es auf der Seite geht werden geladen und angezeigt, für die erste Zeit. Es wird nicht erneut ausgelöst, es sei denn, die Seite manuell aktualisiert werden, oder ajax laden der Seite ausgeschaltet ist. In Fall, dass Sie möchten, code auszuführen, jedes mal, wenn Sie eine Seite besuchen, es ist besser, pagebeforeshow Veranstaltung.

Hier ist ein funktionierendes Beispiel : http://jsfiddle.net/Gajotres/Q3Usv/ um dieses problem zu demonstrieren.

Paar weitere Hinweise zu dieser Frage. Egal ob Sie mit 1 html mehrere Seiten oder mehrere html-Dateien Paradigma ist es ratsam, zu trennen, werden alle Ihre benutzerdefinierten javascript-Seite Handhabung in einem einzigen separaten js-Datei. Dieser Hinweis wird Ihr code besser aber Sie haben viel bessere code übersicht, vor allem während der Erstellung einer jQuery Mobile Anwendung.

Gibt es auch andere Besondere jQuery Mobile event und es heißt mobileinit.Wenn jQuery Mobile beginnt, löst er eine mobileinit event auf das document-Objekt. Die Grundeinstellungen überschreiben, die Sie binden, zu mobileinit. Eine gute Beispiele für mobileinit Nutzung ausschalten ajax laden der Seite, oder ändern der Standard-ajax-loader-Verhalten.

$(document).on("mobileinit", function(){
  //apply overrides here
});

Versuchen

show

$.mobile.showPageLoadingMsg();

ausblenden

$.mobile.hidePageLoadingMsg();

müssen ausblenden der spinner, wenn Sie dynamisch ist, indem der Inhalt

überprüfen Sie diese ein