JQuery Mobile 1.4 Update:

Mój oryginalny artykuł był przeznaczony do starego sposobu obsługi stron, w zasadzie wszystko przed jQuery Mobile 1.4. Stary sposób obsługi jest teraz przestarzały i pozostanie aktywny do (włącznie) jQuery Mobile 1.5, więc nadal możesz korzystać ze wszystkich wymienionych poniżej, przynajmniej do przyszłego roku i jQuery Mobile 1.6.

Stare zdarzenia, w tym pageinit już nie istnieją, są zastępowane widżetem pagecontainer . Pageinit jest usuwany całkowicie i możesz użyć pagecreate zamiast tego, to zdarzenie pozostało takie samo i nie zostanie zmienione.

Jeśli jesteś zainteresowany nowym sposobem obsługi zdarzeń page zajrzyj proszę., w każdym innym przypadku zachęcamy do kontynuowania tego artykułu. Powinieneś przeczytać tę odpowiedź nawet jeśli używasz jQuery Mobile 1.4+, wykracza ona poza wydarzenia na stronie, więc prawdopodobnie znajdziesz wiele przydatnych informacji.

Starszy treść:

Ten artykuł można również znaleźć jako część mojego bloga proszę..

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

Pierwszą rzeczą, której nauczysz się w jQuery jest wywołanie kodu wewnątrz $(document).ready() funkcja więc wszystko zostanie wykonane, gdy tylko DOM zostanie załadowany. Jednak w jQuery Mobile, Ajax jest używany do ładowania zawartości każdej strony do DOM podczas nawigacji. Z tego powodu $(document).ready() uruchomi się przed pierwszą stroną załadowany i każdy kod przeznaczony do manipulacji stroną zostanie wykonany po odświeżeniu strony. To może być bardzo subtelny błąd. Na niektórych systemach może się wydawać, że działa dobrze, ale na innych może powodować nieregularne, trudne do powtórzenia dziwactwa.

Klasyczna składnia jQuery:

$(document).ready(function() {

});

Aby rozwiązać ten problem (i uwierz mi, że jest to problem) Programiści jQuery Mobile stworzyli zdarzenia stron. W skrócie zdarzenia strony to zdarzenia wyzwalane w danym punkcie strony egzekucja. Jednym z takich zdarzeń strony jest pageinit event i możemy go używać w następujący sposób:

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

});

Możemy pójść jeszcze dalej i użyć identyfikatora strony zamiast selektora dokumentów. Załóżmy, że mamy Stronę jQuery Mobile o 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>

Aby wykonać kod, który będzie dostępny tylko dla strony indeksu, możemy użyć składni:

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

});

Pageinit zdarzenie zostanie wykonane za każdym razem, gdy strona zostanie załadowana i wyświetlona po raz pierwszy. Informatyka nie uruchomi się ponownie, chyba że strona jest ręcznie odświeżane lub Ajax ładowanie strony jest wyłączona. Jeśli chcesz, aby Kod był wykonywany za każdym razem, gdy odwiedzasz stronę, lepiej jest użyć zdarzenia pagebeforeshow .

Oto działający przykład: http://jsfiddle.net/Gajotres/Q3Usv / aby zademonstrować ten problem.

Jeszcze kilka uwag na to pytanie. Bez względu na to, czy używasz 1 html wielu stron lub wielu plików HTML paradygmat zaleca się, aby oddzielić wszystkie swoje niestandardowe Obsługa strony JavaScript w jednym osobnym pliku JavaScript. To zwróci uwagę, że Twój kod będzie lepszy, ale będziesz miał znacznie lepszy przegląd kodu, szczególnie podczas tworzenia aplikacji jQuery Mobile.

Istnieje również inne specjalne Zdarzenie jQuery Mobile i nazywa się mobileinit. Po uruchomieniu jQuery Mobile uruchamia Zdarzenie mobileinit na obiekcie document. Aby nadpisać ustawienia domyślne, połącz je z mobileinit . Jednym z dobrych przykładów użycia mobileinit jest wyłączenie ładowania strony Ajax lub zmiana domyślnego zachowania Ajax loader.

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

Kolejność zdarzeń strony

Najpierw wszystkie wydarzenia można znaleźć tutaj: http://api.jquerymobile.com/category/events/

Powiedzmy, że mamy stronę A i stronę B, to jest polecenie rozładowania/załadowania:

1. Strona B-wydarzenie pagebeforecreate

2. Strona B-Wydarzenie pagecreate

3. Strona B-Wydarzenie pageinit

4. Strona A-Wydarzenie pagebeforehide

5. Strona A-Wydarzenie pageremove

6. Strona A-Wydarzenie pagehide

7. Strona B-wydarzenie pagebeforeshow

8. Strona B-Wydarzenie pageshow

Dla lepszego zrozumienia zdarzeń na stronie przeczytaj to:

• pagebeforeload, pageload oraz pageloadfailed są wywoływane po załadowaniu zewnętrznej strony
• pagebeforechange, pagechange oraz pagechangefailed są zdarzenia zmiany strony. Zdarzenia te są wywoływane, gdy użytkownik porusza się między Stronami w aplikacje.
• pagebeforeshow, pagebeforehide, pageshow oraz pagehide są zdarzenia przejścia strony. Zdarzenia te są wywoływane przed, w trakcie i po przejściu i są nazwane.
• pagebeforecreate, pagecreate oraz pageinit są do inicjalizacji strony.
• pageremove może być wywołany, a następnie obsługiwany, gdy strona jest usuwana z DOM

Przykład ładowania strony jsFiddle: http://jsfiddle.net/Gajotres/QGnft/

Jeśli AJAX nie jest włączony, niektóre zdarzenia mogą nie zostać uruchomione.

Zapobiegaj zmianie strony

Jeśli z jakiegoś powodu trzeba zapobiec przejściu strony pod pewnym warunkiem, można to zrobić za pomocą tego kodu:

$(document).on('pagebeforechange', function(e, data){
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#index' && to === '#second') {
            alert('Can not transition from #index to #second!');
            e.preventDefault();
            e.stopPropagation();

            // remove active status on a button, if transition was triggered with a button
            $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus ui-btn');;
        }
    }
});

Ten przykład będzie działał w każdym przypadku, ponieważ uruchomi się na początku każdego przejścia strony i co najważniejsze, zapobiegnie zmianie STRONY, ZANIM Przejście strony może występuje.

Zapobieganie wiązaniu/wyzwalaniu wielu zdarzeń

jQuery Mobile Działa w inny sposób niż klasyczne aplikacje internetowe. W zależności od tego, jak udało Ci się powiązać wydarzenia za każdym razem, gdy odwiedzasz jakąś stronę, będzie ona wiązać wydarzenia w kółko. To nie jest błąd, to po prostu jak jQuery Mobile obsługuje swoje strony. Na przykład, spójrz na ten fragment kodu:

$(document).on('pagebeforeshow','#index' ,function(e,data){
    $(document).on('click', '#test-button',function(e) {
        alert('Button click');
    });
});

Działający przykład jsFiddle: http://jsfiddle.net/Gajotres/CCfL4/

Za każdym razem, gdy odwiedzasz stronę # index click event będzie związany z Buttonem #test-button. Przetestuj go, przechodząc ze strony 1 na stronę 2 i z powrotem kilka razy. Istnieje kilka sposobów, aby zapobiec temu problemowi:

Rozwiązanie 1

Najlepszym rozwiązaniem byłoby użycie pageinit aby powiązać zdarzenia. Jeśli spojrzysz na oficjalną dokumentację, dowiesz się, że pageinit uruchomi tylko raz, tak jak dokument gotowy, więc nie ma możliwości, aby zdarzenia były ponownie związane. Jest to najlepsze rozwiązanie, ponieważ nie masz narzutu przetwarzania, jak podczas usuwania zdarzeń metodą off.

Działający przykład jsFiddle: http://jsfiddle.net/Gajotres/AAFH8/

To rozwiązanie robocze jest wykonane na podstawie poprzedniego problematycznego przykładu.

Rozwiązanie 2

Usuń Zdarzenie przed związaniem go:

$(document).on('pagebeforeshow', '#index', function(){
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    });
});

Działający przykład jsFiddle: http://jsfiddle.net/Gajotres/K8YmG/

Rozwiązanie 3

Użyj selektora filtrów jQuery, tak:

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

Ponieważ filtr zdarzeń nie jest częścią oficjalnego frameworka jQuery, można go znaleźć tutaj: http://www.codenothing.com/archives/2009/event-filter/

W skrócie, jeśli szybkość jest twoim głównym problemem, to Rozwiązanie 2 jest znacznie lepsze niż rozwiązanie 1.

Rozwiązanie 4

Nowy, prawdopodobnie najłatwiejszy z nich wszystkie.

$(document).on('pagebeforeshow', '#index', function(){
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more than once
        {
            alert('Clicked');
            e.handled = true;
        }
    });
});

Działający przykład jsFiddle: http://jsfiddle.net/Gajotres/Yerv9/

Tnx do sholsinger dla tego rozwiązania: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

Pagechange event quirks - wyzwalanie dwukrotnie

Czasami Zdarzenie pagechange może wyzwalać się dwukrotnie i nie ma to nic wspólnego z wcześniej wspomnianym problemem.

Powód Zdarzenie pagebeforechange występuje dwa razy, jest spowodowane rekurencyjnym wywołaniem changePage, gdy toPage nie jest ulepszonym obiektem DOM jQuery. Ta rekurencja jest niebezpieczna, ponieważ programista może zmienić toPage w zdarzeniu. Jeśli programista konsekwentnie ustawia toPage na łańcuch znaków, wewnątrz procedury obsługi zdarzenia pagebeforechange, niezależnie od tego, czy był to obiekt, czy nie, powstanie nieskończona pętla rekurencyjna. Zdarzenie pageload przekazuje nową stronę jako właściwość page obiektu danych (Ta powinien być dodany do dokumentacji, nie jest obecnie wymieniony). Zdarzenie pageload może zatem zostać użyte do uzyskania dostępu do załadowanej strony.

W kilku słowach dzieje się tak, ponieważ wysyłasz dodatkowe parametry za pośrednictwem pageChange.

Przykład:

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

Aby rozwiązać ten problem, użyj dowolnego zdarzenia strony wymienionego w kolejność zdarzeń strony .

Czasy Zmiany Strony

Jak wspomniano, po zmianie z jednej strony jQuery Mobile na inną, zazwyczaj albo poprzez kliknięcie na link do innej strony jQuery Mobile, która już istnieje w DOM, albo przez ręczne wywołanie $.mobile.changePage, kilka zdarzeń i kolejnych akcji występuje. Na wysokim poziomie występują następujące działania:

• rozpoczyna się proces zmiany strony
• wczytana jest nowa strona
W 2009 roku firma została założona w 2009 roku.]}
• Przejście (slide / pop / etc) z istniejącej strony do nowej strony występuje

Ładowanie i przetwarzanie strony: 3 ms

Strona: 45 ms

Transition: 604 ms

Całkowity czas: 670 ms

* te wartości są w milisekundach.

Więc jak widzisz, Zdarzenie przejściowe pochłania prawie 90% czasu wykonania.

Manipulacja danymi/parametrami między przejściami strony

Jest to możliwe aby wysłać parametr/y z jednej strony na drugą podczas przejścia strony. Można to zrobić na kilka sposobów.

Numer referencyjny: https://stackoverflow.com/a/13932240/1848600

Rozwiązanie 1:

Możesz przekazać wartości z changePage:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

I czytać je jak to:

$(document).on('pagebeforeshow', "#index", function (event, data) {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");
    alert(parameter);
});

Przykład :

Indeks.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(document).on('pagebeforeshow', "#index",function () {
            $(document).on('click', "#changePage",function () {
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
            });
        });

        $(document).on('pagebeforeshow', "#second",function () {
            var parameters = $(this).data("url").split("?")[1];;
            parameter = parameters.replace("parameter=","");
            alert(parameter);
        });
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="index">
        <div data-role="header">
            <h3>
                First Page
            </h3>
        </div>
        <div data-role="content">
          <a data-role="button" id="changePage">Test</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

Drugi.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Second Page
            </h3>
        </div>
        <div data-role="content">

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

Rozwiązanie 2:

Lub można utworzyć trwały obiekt JavaScript do celów przechowywania. Dopóki Ajax jest używany do ładowania strony (i strona nie jest przeładowywana w żaden sposób), obiekt pozostanie aktywny.

var storeObject = {
    firstname : '',
    lastname : ''
}

Przykład: http://jsfiddle.net/Gajotres/9KKbx/

Rozwiązanie 3:

Możesz również uzyskać dostęp do danych z poprzedniej strony w następujący sposób:

$(document).on('pagebeforeshow', '#index',function (e, data) {
    alert(data.prevPage.attr('id'));
});

PrevPage obiekt przechowuje pełną poprzednią stronę.

Rozwiązanie 4:

Jako ostatnie rozwiązanie mamy sprytną implementację HTML localStorage. Działa tylko z przeglądarkami HTML5 (w tym przeglądarkami Android i iOS), ale wszystkie przechowywane dane są trwałe przez stronę odśwież.

if(typeof(Storage)!=="undefined") {
    localStorage.firstname="Dragan";
    localStorage.lastname="Gaic";
}

Przykład: http://jsfiddle.net/Gajotres/J9NTr/

Prawdopodobnie najlepsze rozwiązanie, ale zawiedzie w niektórych wersjach iOS 5.X. Jest to dobrze znany błąd.

Nie używaj .live() / .bind() / .delegate()

Zapomniałem wspomnieć (i tnx i Leer dla przypomnienia) używać on / off do wiązania zdarzeń/ unbinding, live / die I bind / unbind są przestarzałe.

The .metoda live () jQuery była postrzegana jako dar niebios, kiedy została wprowadzona do API w wersji 1.3. W typowej aplikacji jQuery może być wiele manipulacji DOM i może stać się bardzo żmudne, aby hook i odhaok jak elementy przychodzą i odchodzą. Metoda .live() umożliwiła podłączenie zdarzenia do życia aplikacji na podstawie jej selektora. Świetnie, prawda? Błąd, metoda .live() jest bardzo powolna. Metoda .live() faktycznie hookuje swoje zdarzenia do obiektu document, co oznacza, że zdarzenie musi się pęcherzykować z elementu, który wygenerował Zdarzenie, aż dotrze do dokument. Może to być niezwykle czasochłonne.

Jest obecnie przestarzały. Ludzie z zespołu jQuery nie zalecają już jego używania, podobnie jak ja. nawet jeśli hookowanie i odczepianie zdarzeń może być uciążliwe, Twój kod będzie znacznie szybszy bez metody .live() niż z nią.

Zamiast .live() należy użyć .on(). .on() jest około 2 - 3x szybszy niż .live () . Spójrz na ten benchmark wiążący zdarzenia: http://jsperf.com/jquery-live-vs-delegate-vs-on/34 , wszystko będzie jasne stamtąd.

Benchmarking:

Jest doskonały skrypt stworzony dla jQuery Mobile Page events benchmarking. Można go znaleźć tutaj: https://github.com/jquery/jquery-mobile/blob/master/tools/page-change-time.js . ale zanim cokolwiek z nim zrobisz, radzę Ci usunąć jego alert system powiadomień (każda "strona zmiany" pokaże ci te dane zatrzymując aplikację) i zmienić ją na console.log funkcja.

Zasadniczo ten skrypt zapisze wszystkie zdarzenia strony i jeśli uważnie przeczytasz ten artykuł (opisy zdarzeń strony), będziesz wiedział, ile czasu jqm spędził na ulepszaniu stron, przejściach stron ....

Uwagi końcowe

Zawsze, a mam na myśli zawsze czytać oficjalną dokumentację jQuery Mobile . Zazwyczaj dostarczy Ci potrzebnych informacji, a w przeciwieństwie do innej dokumentacji ten jest raczej dobry, z wystarczającą ilością wyjaśnień i przykładów kodu.

Zmiany:

• 30.01.2013-Dodano nową metodę zapobiegania wielokrotnemu wyzwalaniu zdarzeń
• 31.01.2013-Dodano lepsze wyjaśnienie dla rozdziału manipulacja danymi/parametrami między przejściami strony
• 03.02.2013-Dodano nową treść / przykłady do rozdziału manipulacja danymi/parametrami między przejściami strony
• 22.05.2013-dodano rozwiązanie dla zmiana strony / zapobieganie zmianom i dodano linki do oficjalnej dokumentacji API zdarzeń strony
• 18.05.2013-dodano kolejne rozwiązanie przeciw wiązaniu wielu zdarzeń