Kiedy należy używać funkcji document.ready jQuery?

Powiedziano mi, żebym używał document.ready, gdy po raz pierwszy zacząłem używać Javascript/jQuery, ale nigdy nie nauczyłem się dlaczego.Kiedy należy używać funkcji document.ready jQuery?

Czy ktoś może podać kilka podstawowych wskazówek, kiedy ma sens pakowanie kodu javascript/jquery w jQuery's document.ready?

Niektóre tematy Jestem zainteresowany: .on() metody

jQuery: Używam metody .on() dla AJAX całkiem sporo (zazwyczaj na dynamicznie tworzone elementy DOM). Gdyby .on() kliknij koparki zawsze być wewnątrzdocument.ready?
Wydajność: czy jest to bardziej wydajnych zachować różne JavaScript/jQuery obiektów wewnątrz lub poza document.ready (również jest znacząca różnica wydajności?)?
zakres obiektu: AJAX załadowane strony nie może uzyskać dostępu do obiektów, które były wewnątrz przeor document.ready Page'a, prawda? Mogą tylko obiekty dostępu, które były poza document.ready (to naprawdę „globalne” obiekty)?

Aktualizacja: Aby skorzystać z najlepszych praktyk, całe Javascript (biblioteki jQuery i mojego kodu aplikacji) znajduje się w dolnejmojej strony HTML i używam atrybut defer na jQuery- zawierające skrypty na moich stronach ładowanych przez AJAX, dzięki czemu mogę uzyskać dostęp do biblioteki jQuery na tych stronach.

Źródło

2012-10-25 tim peterson

Bo jeśli DOM nie jest gotowy, możesz uzyskać nieoczekiwane wyniki, to wszystko. –

2.- Cóż, używam ** na zewnątrz ** tylko do debugowania i mogę zadzwonić do jakiegoś var/funkcji przez konsolę, –

@RobertHarvey jakie wyniki są "nieoczekiwane"? czy możesz podać przykład? –

116

w prostych słowach,

$(document).ready jest wydarzeniem, które odpala się po document jest gotowy.

Załóżmy umieszczeniu kodu jQuery w head sekcji i próbuje uzyskać dostęp do dom element (kotwicę An img itp), nie będzie mógł uzyskać do niego dostęp, ponieważ html interpretowany jest od góry do dołu i twoi Elementy html nie są obecne podczas działania kodu jQuery.

Aby rozwiązać ten problem, umieszczamy każdy kod jQuery/javascript (który korzysta z DOM) wewnątrz funkcji $(document).ready, która jest wywoływana, gdy wszystkie elementy dom są dostępne.

I to jest powód, kiedy umieścić kod jQuery na dole (po uwzględnieniu wszystkich elementów DOM, tuż przed </body>) nie ma potrzeby $(document).ready

Nie ma potrzeby, aby umieścić on metody wewnątrz $(document).ready tylko przy użyciu metody on na document z tego samego powodu, który wyjaśniłem powyżej.

//No need to put inside $(document).ready 
    $(document).on('click','a',function() { 
    }) 

    // Need to put inside $(document).ready if placed inside <head></head> 
    $('.container').on('click','a',function() { 
    });

EDIT

Z uwag

$(document).ready nie czekać na obrazy lub skrypty. To duża różnica między $(document).ready i $(document).load
Tylko kod, który uzyskuje dostęp do DOM, powinien znajdować się w gotowym module obsługi. Jeśli jest to wtyczka, nie powinna być w gotowym wydarzeniu.

Źródło

2012-10-25 05:46:24 Jashwant

@ Dipaks Tak, dlaczego nie?Jesteśmy po prostu bardzo przyzwyczajeni do używania '$ (document) .ready'. Zobacz [this] (http://jsfiddle.net/GrvwX/) – Jashwant

Dopóki ładujesz jQuery w 'head' i jesteś skryptem po manipulowaniu elementami,' document.ready' nie jest potrzebny. Obrazy są jednak szczególnym przypadkiem ... – elclanrs

+1 dobre wyjaśnienie! :) – Dipak

.ready() - określa funkcję do wykonania, gdy DOM jest w pełni załadowany.

$(document).ready(function() { 
    // Handler for .ready() called. 
});

Oto Lista all jQuery Methods

przeczytać na Introducing $(document).ready()

Źródło

2012-10-25 05:44:54 Dipak

być realistyczne, document.ready nie jest potrzebny do niczego innego niż manipulowanie DOM dokładnie i nie zawsze jest potrzebne, czy najlepszym rozwiązaniem. Mam na myśli to, że kiedy tworzysz dużą wtyczkę jQuery, na przykład prawie nie używasz jej w całym kodzie, ponieważ starasz się, aby była ona SUCHA, więc w miarę możliwości jak najwięcej abstrakcyjnych metod, które manipulują DOM, ale które mają być wywołane później. Gdy cały kod jest ściśle zintegrowany, jedyną metodą wyeksponowaną w document.ready jest zwykle init, gdzie dzieje się cała magia DOM. Mam nadzieję, że to odpowiada na twoje pytanie.

Źródło

2012-10-25 05:47:18 elclanrs

Powinieneś związać wszystkie działania w document.ready, ponieważ powinieneś poczekać, aż dokument zostanie w pełni załadowany.

Powinieneś jednak tworzyć funkcje dla wszystkich akcji i wywoływać je z poziomu document.ready. Gdy tworzysz funkcje (twoje obiekty globalne), dzwoń do nich kiedy chcesz. Po załadowaniu nowych danych i utworzeniu nowych elementów ponownie wywołaj te funkcje.

Te funkcje to te, w których powiązałeś zdarzenia i elementy akcji.

$(document).ready(function(){ 
bindelement1(); 
bindelement2(); 
}); 

function bindelement1(){ 
$('el1').on('click',function...); 
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again 
} 

function bindelement2(){ 
$('el2').on('click',function...); 
}

Źródło

2012-10-25 05:47:48

Odpowiedzi: metoda

.Na jQuery(): Używam metody .on() dla AJAX trochę (dynamicznie tworzenia elementów DOM). Czy procedury obsługi klipów .on() powinny zawsze znajdować się wewnątrz dokumentu.

Nie, nie zawsze. Jeśli załadujesz swój JS w nagłówku dokumentu, będziesz musiał. Jeśli tworzysz elementy po wczytaniu strony przez AJAX, będziesz musiał. Nie musisz, jeśli skrypt znajduje się poniżej elementu html, do którego dodajesz również handler.

Wydajność: czy jest to bardziej wydajnych zachować różne JavaScript/jQuery obiektów wewnątrz lub na zewnątrz document.ready (również jest znacząca różnica wydajności?)?

To zależy. Założenie modułów obsługi zajmie tyle samo czasu, zależy to tylko od tego, czy chcesz, aby nastąpiło to natychmiast po załadowaniu strony, czy też chcesz poczekać na załadowanie całego dokumentu. Zależy więc od innych rzeczy, które robisz na stronie.

Zakres obiektu: strony ładowane przez AJAX nie mają dostępu do obiektów znajdujących się wewnątrz dokumentu wcześniejszej strony. Mogą uzyskać dostęp tylko do obiektów , które znajdowały się poza document.ready (tzn. Naprawdę "globalne" obiekty)?

To zasadniczo swój własny funkcja więc może tylko Vars dostępu zadeklarowana w zakresie globalnym (poza/ponad wszystkimi funkcjami) lub window.myvarname = '';

Źródło

2012-10-25 05:51:56 Justin

Zanim będzie można bezpiecznie używać jQuery musisz upewnić się, że strona jest w stanie, w którym jest on gotowy do manipulowania. W jQuery osiągamy to, umieszczając nasz kod w funkcji, a następnie przekazując tę funkcję do $(document).ready(). Funkcją, którą przekażemy, może być po prostu anonymous function.

$(document).ready(function() { 
    console.log('ready!'); 
});

Spowoduje to uruchomienie funkcji, którą przekazujemy do .ready(), gdy dokument jest gotowy. Co tu się dzieje? Używamy $ (dokument) do utworzenia obiektu jQuery z dokumentu naszej strony, a następnie wywołania funkcji .ready() na tym obiekcie, przekazując mu funkcję, którą chcemy wykonać.

Ponieważ jest to coś, co często robisz, możesz skorzystać ze skróconej metody, jeśli wolisz - funkcja $() pełni podwójną funkcję jako alias dla $ (document) .ready() jeśli przeszedłeś to funkcja:

$(function() { 
    console.log('ready!'); 
});

jest to dobra lektura: Jquery Fundamentals

Źródło

2012-10-25 06:03:02

Nie mylić z '(function ($) {}) (jQuery);' który opakowuje twój kod tak, że $ jest jQuery wewnątrz tego zamknięcie –

-2

on gotowy zdarzenie występuje, gdy DOM (Document Object Model) został załadowany.

Ponieważ to zdarzenie występuje po przygotowaniu dokumentu, jest to dobre miejsce na wszystkie inne zdarzenia i funkcje jQuery. Jak w powyższym przykładzie.

Metoda ready() określa, co się stanie, gdy pojawi się gotowe wydarzenie.

Wskazówka: Metody ready() nie należy używać razem z.

Źródło

2015-01-19 08:35:22

Dołączyłem łącze do elementu div i chciałem wykonać pewne czynności za pomocą kliknięcia. Dodałem kod poniżej dołączonego elementu w DOM, ale to nie zadziałało. Oto kod:

<div id="advance-search"> 
    Some other DOM elements 
    <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>--> 
</div> 

<script> 
    $("#advance-search #reset-adv-srch").on("click", function(){ 
    alert('Link Clicked');`` 
    }); 
</script>

To nie zadziałało. Następnie umieściłem kod jQuery w $ (document) .ready i działało idealnie. Oto jest.

$(document).ready(function(e) { 
    $("#advance-search #reset-adv-srch").on("click", function(){ 
     alert('Link Clicked'); 
    }); 
});

Źródło

2017-09-25 06:37:09

Kiedy należy używać funkcji document.ready jQuery?

Odpowiedz

Powiązane problemy