Коли я повинен використовувати функцію document.ready jQuery?

107

Мені сказали використовувати document.ready, коли я вперше почав використовувати Javascript / jQuery, але я ніколи не дізнався чому.

Чи може хтось надати деякі основні вказівки щодо того, коли є сенс загортати код JavaScript / jquery всередині jQuery document.ready?

Деякі теми, які мене цікавлять:

.on()Метод jQuery : Я .on()досить часто використовую метод для AJAX (зазвичай для динамічно створених елементів DOM). Чи повинні завжди.on() обробники кліків знаходитись всередині ? document.ready
Продуктивність: Чи ефективніше зберігати різні об'єкти javascript / jQuery всередині або поза документом. (Також, чи є різниця в продуктивності?)?
Обсяг об’єкта: Завантажені AJAX сторінки не можуть отримати доступ до об'єктів, які знаходилися в документі попередньої сторінки. Вже, правда? Вони можуть отримати доступ лише до об'єктів, які були поза документом (тобто справді "глобальними" об'єктами)?

Оновлення: Щоб дотримуватися кращої практики, весь мій JavaScript (бібліотека jQuery та код мого додатка) знаходиться внизу моєї HTML-сторінки, і я використовую deferатрибут на скриптах, що містять jQuery, на моїх завантажених AJAX сторінках, щоб я може отримати доступ до бібліотеки jQuery на цих сторінках.

— Тім Пітерсон
джерело

2

Тому що, якщо DOM не готовий, ви можете отримати несподівані результати, це все.

— Роберт Харві

1

2.- Ну я використовую зовні лише для налагодження і можу викликати деякі var / function за консоллю,

— jd_7

@RobertHarvey які "несподівані" результати? ви можете навести приклад?

— Тім Петерсон

3

Ви намагаєтесь змінити елемент або атрибут, які ще не зробили його в DOM.

— Роберт Харві

143

Простими словами,

$(document).readyце подія, яка загоряється, коли documentготова.

Припустимо, ви розмістили свій код jQuery у headрозділі та намагаєтесь отримати доступ до domелемента (якір, img тощо), ви не зможете отримати доступ до нього, оскільки htmlінтерпретується зверху вниз, а ваші HTML-елементи відсутні, коли ваш код jQuery пробіжки.

Щоб подолати цю проблему, ми розміщуємо кожен jQuery / javascript-код (для якого використовується DOM) всередині $(document).readyфункції, яка викликається, коли до всіх domелементів можна отримати доступ.

І це причина, коли ви розміщуєте код jQuery внизу (адже всі елементи dom, безпосередньо перед цим </body>), немає необхідності в$(document).ready

Не потрібно розміщувати onметод всередину $(document).readyлише тоді, коли ви використовуєте onметод documentіз тієї ж причини, яку я пояснив вище.

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

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

EDIT

З коментарів,

$(document).readyне чекає зображень чи сценаріїв. У цьому велика різниця між $(document).readyі$(document).load
Тільки код, який звертається до DOM, повинен містити готовий обробник. Якщо це плагін, він не повинен бути готовим до події.

— Джашвант
джерело

@Dipaks Так, чому б і ні? Ми просто дуже звикли використовувати $(document).ready. Дивіться це

— Jashwant

Поки ви завантажуєте jQuery у headсценарії та ви керуєтесь елементами після маніпулювання елементами, document.readyце не потрібно. Зображення - це особливий випадок ...

— elclanrs

@elclanrs Дивіться моє оновлене запитання. Я завантажую jQuery внизу моєї HTML-сторінки з моїм кодом конкретного додатка відразу після цього.

— Тім Петерсон

@Jashwant, як щодо відмінностей у роботі dom.ready проти ні? Чи це актуально?

— Тім Петерсон

1

Ми не ставимо весь jQueryкод у готовий обробник. Тільки код, який має доступ до DOM. Якщо це плагін, його не повинно бути в цьому ready випадку

— Хуан Мендес

7

Відповіді:

Метод jQuery .on (): я досить мало використовую метод .on () для AJAX (динамічно створюючи елементи DOM). Чи повинні обробники кліків .on () завжди знаходитись у документі вже?

Ні, не завжди. Якщо ви завантажите свій JS в головку документа, вам потрібно буде. Якщо ви створюєте елементи після завантаження сторінки через AJAX, вам потрібно буде. Вам не знадобиться, якщо сценарій знаходиться нижче елемента html, ви також додаєте обробник.

Продуктивність: Чи ефективніше зберігати різні об'єкти javascript / jQuery всередині або поза документом. (Також, чи є різниця в продуктивності?)?

Це залежить. На додавання обробників знадобиться стільки ж часу, це просто залежить, якщо ви хочете, щоб це відбулося негайно під час завантаження сторінки або ви хочете зачекати, поки не буде завантажений весь документ. Тож буде залежати, що ще ви робите на сторінці.

Обсяг об’єкта: Завантажені AJAX сторінки не можуть отримати доступ до об'єктів, які знаходилися в документі попередньої сторінки. Вже, правда? Вони можуть отримати доступ лише до об'єктів, які були поза документом (тобто справді "глобальними" об'єктами)?

По суті, це власна функція, тому він може отримувати доступ лише до варіантів, оголошених у глобальному масштабі (поза / над усіма функціями) або з window.myvarname = '';

— Джастін
джерело

6

Перш ніж безпечно використовувати jQuery, вам потрібно переконатися, що сторінка знаходиться в стані, коли вона готова до маніпулювання. За допомогою jQuery ми це робимо, вводячи наш код у функцію, а потім передаючи цю функцію $(document).ready(). Функція, яку ми передаємо, може бути просто анонімною функцією .

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

Це запустить функцію, яку ми переходимо до .ready (), як тільки документ буде готовий. Що тут відбувається? Ми використовуємо $ (document) для створення об’єкта jQuery з документа нашої сторінки, а потім викликаємо функцію .ready () на цьому об’єкті, передаючи йому функцію, яку ми хочемо виконати.

Оскільки це те, що ви дуже багато робите, існує короткочасний метод для цього, якщо вам більше зручно - функція $ () виконує подвійний обов'язок як псевдонім для $ (document) .ready (), якщо ви передасте йому функцію:

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

Це добре прочитання: Основи Jquery

— Том Сардуй
джерело

3

Не слід плутати те, (function($){ })(jQuery);що обертає ваш код, щоб $ було jQuery всередині цього закриття

— Джон Магнолія

3

.ready () - Вкажіть функцію, яку потрібно виконати, коли DOM повністю завантажений.

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

Ось список усіх методів jQuery

Читайте про введення $ (document) .ready ()

— Діпак
джерело

3

Щоб бути реалістичним, document.readyне потрібно нічого іншого, крім точного маніпулювання DOM, і це не завжди потрібен або найкращий варіант. Що я маю на увазі, що, наприклад, коли ви розробляєте великий плагін jQuery, ви навряд чи використовуєте його в коді, оскільки ви намагаєтесь його тримати DRY, тому ви максимально абстрагуєтесь у методах, що маніпулюють DOM, але призначені для виклику пізніше. Коли весь ваш код щільно інтегрований, єдиний метод, який піддається впливу document.ready, зазвичай це initтам, де відбувається вся магія DOM. Сподіваюся, що це відповість на ваше запитання.

— еклани
джерело

0

Ви повинні зв’язати всі дії в document.ready, тому що вам слід дочекатися повного завантаження документа.

Але вам слід створити функції для всіх дій та викликати їх з документа. Коли ви створюєте функції (ваші глобальні об'єкти), телефонуйте їм, коли захочете. Тож як тільки ваші нові дані завантажуються та створюються нові елементи, зателефонуйте знову до цих функцій.

Ці функції є тими, де ви зв'язали події та елементи дій.

$(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...);
}

— Pulkit Mittal
джерело

0

Я додав посилання на дів і хотів виконати кілька завдань на клацанні. Я додав код під доданим елементом у DOM, але він не працював. Ось код:

<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>

Це не спрацювало. Тоді я помістив код jQuery всередині $ (document) .ready і він працював чудово. Ось.

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

— Безпечний Ахмед
джерело

-2

він готовий подія відбувається, коли DOM (модель об'єкта документа) була завантажена.

Оскільки ця подія відбувається після того, як документ буде готовий, це хороше місце для всіх інших подій та функцій jQuery. Як у прикладі вище.

Метод Ready () вказує, що відбувається, коли відбувається подія готового.

Порада: Готовий () метод не слід використовувати разом з.

— Шрікант Шиледар
джерело