Почему $.click() заключен в $(document).ready()?

Я переживаю http://docs.jquery.com/How_jQuery_Works и обнаруживаю, что требование включения события $.click() в $(document).ready() даже немного странно. Мои трудности заключаются в следующем:

  • Когда документ загружается, элемент управления войдет в функцию $(document).ready(), но продолжит ли выполнение $.click()? (В зависимости от поведения он не будет. Но когда элемент управления входит в нормальную функцию, почему бы ему не войти в функцию $.click()?)
  • Поскольку пользователь может видеть URL-адрес только после того, как документ готов, действительно ли требуется встроить $.click() в $(document).ready()?

ОТВЕТЫ

Ответ 1

Как документ jQuery Works использует пример привязки .click() внутри $(document).ready(), чтобы быть уверенным, что элемент, для которого событие .click() связанная была создана, когда функция выполняет.

.click(), вызываемый с функцией в качестве ее параметра, не выполняет .click() в узлах, соответствующих его предыдущему селектору, а скорее связывает функцию с соответствующими узлами 'onclick.

Если вы попытаетесь сделать что-то вроде этого:

$('a').click(function(){
  alert('clicked me');
});

... в документе <head> или перед тем, как был выведен какой-либо элемент <a>, событие не будет привязано к какому-либо node, поскольку no node, соответствующий селектору $('a'), существовал во время выполняемая функция.

Кроме того, если вы сделали это, когда были созданы теги <a>, только те, которые уже были созданы, получат связанное событие. Теги <a>, созданные после привязки функции, не будут иметь привязки .click().

Итак, в jQuery (и других фреймворках JavaScript) вы часто увидите соглашение о добавлении обработчиков событий, привязки виджетах и ​​т.д. внутри $(document).ready(function(){});

Ответ 2

Это не фактический вызов .click(), который здесь вызывает беспокойство, а скорее селектор для элемента, на котором он вызвал.

Например, если есть элемент с id="myButton", вы должны ссылаться на него с помощью:

$('#myButton')

Однако, если этот элемент еще не загружен (то есть, если документ еще не готов, и вы не знаете, какие элементы загружены в настоящий момент), то этот селектор ничего не найдет. Поэтому он не будет называть .click() ничем (либо привязать событие, либо уволить его, в зависимости от аргумента (ов) до .click()).

Вы можете использовать другие подходы, такие как функция jQuery .on(), которая может связывать события с общими родительскими элементами и фильтровать "пузырь" "события из тех, которые были добавлены позже в жизни документа. Но если вы используете обычный селектор и вызываете функцию, селектор должен найти что-то в DOM, чтобы функция могла что-либо сделать.

Ответ 3

Да, вы должны убедиться, что элемент DOM, к которому вы добавляете обработчик кликов, существует, все, что вы знаете об этом, когда документ готов.

Ответ 4

Проблема, которую пытается решить метод $(document).ready(..), - это напряжение между выполнением кода javascript для страницы и временем, с которым связаны элементы управления на странице. Функция ready срабатывает, когда документ готов и элементы DOM доступны, поэтому код javascript может сделать разумные предположения о DOM

Наиболее распространенным примером является расположение javascript-кода в отношении элементов DOM, с которыми он пытается работать. Рассмотрим

<script>
$('#target').click(function() {
  alert('It was clicked');
});
</script>
<div id="target">Click Me</div>

В этом конкретном примере javascript не будет функционировать должным образом. Когда введен блок script, строка click запускается и в настоящее время нет элемента DOM с id target, поэтому обработчик ничего не связывает. В коде нет ничего плохого, у него просто было неудачное время для запуска до создания элемента DOM.

В этом примере проблема очевидна, потому что код и элемент DOM визуально спарены вместе. На более сложных веб-страницах, хотя javascript часто находится в полностью отдельном файле и не имеет визуальных гарантий относительно порядка загрузки (и не должен). Использование абстракции $(document).ready(..) устраняет вопрос о заказе как потенциальном источнике проблем и облегчает надлежащее разделение проблем.

Ответ 5

Javascript обычно запускается, как только тег читается. Это означает, что в стандартной практике размещения скриптов в голове еще нет элементов, которые вы создали для привязки обработчика кликов. Даже элемент тела еще не существует. Использование jQuery.ready задерживает выполнение кода до тех пор, пока не будут загружены все элементы DOM.