2012-04-10 2 views
13

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

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

ответ

19

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

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

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

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

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

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

Так в JQuery (и других структур JavaScript), вы часто будете видеть соглашение добавления обработчиков событий, связывания виджетов и т.д., внутри $(document).ready(function(){});

1

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

+1

Похоже, что кто-то избил меня на 19 секунд :) – Maess

5

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

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

$('#myButton') 

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

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

0

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

1

Проблема, которую пытается решить метод $(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 не будет функционировать должным образом. Когда введен блок сценария, выполняется строка click, и в настоящее время нет элемента DOM с идентификатором target, поэтому обработчик ничего не связывает. В коде нет ничего действительно неправильного, у него просто было неудачное время для запуска до создания элемента DOM.

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

Смежные вопросы