2013-11-09 3 views
1

Я не уверен, что, когда мы используем $(document).ready(function() { }); и когда мы можем объявить $(function() { } без него был объявлен в $(document).ready(function() { });Когда документ готов и когда необходимо не в JQuery

Для примера следующий фрагмент:

<body> 
    <textarea id="test" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea> 
    <script type="text/javascript"> 
     $(function() { 
      $("textarea").htmlarea(); 
     }); 
</script> 

работает без использования $(document).ready(function() { }); но следующее:

<body> 
    <textarea id="test" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $("btn").click(function(){ 
      alert('Hello!!!'); 
     }); 
    }); 

     $(function() { 
      $("textarea").htmlarea(); 
     }); 
</script> 

При нажатии на кнопку с id="btn", он ничего не делает.
Я делаю это неправильно?

ответ

6

Во втором примере, если вы на самом деле есть кнопка с id из btn где-то, проблема заключается в том, что вам не хватает в # выбрать по ID:

// ⌄ here 
$("#btn") 

Calling $ с одной функцией и вызывая $(document).ready с той же функцией are equivalent.

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

1

Если кнопка имеет идентификаторbtn, вы должны использовать $('#btn') селектор, как это:

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     alert('Hello!!!'); 
    }); 
}); 

На первый вопрос:

Там не является никакой разницы между $(document).ready(function() { ... }) и $(function() { ... }), вы можете использовать любой из них.

+0

Итак, '$ (document) .ready' избыточен? – Jim

+0

Это не * избыточно *, но вы можете использовать _either_ '$ (document) .ready (function() {...})' _or_ '$ (function() {...})'. –

0

Функции, объявленные в document.ready событиями, выполняются, когда дом готов. Другие функции, (за пределами document.ready) вызывается, когда соответствующее событие запущено.

+0

'вызывается, когда соответствующее событие запущено. ', Но это означает, что дом готов правильно? – Jim

0

Есть два события, которые имеют значение, когда вы хотите вещи, чтобы это произошло «рано» на веб-странице:

  • DOM-конструируют в памяти браузера. Когда это будет сделано, $(document).ready пожаров.
  • Загружены все ресурсы - изображения, таблицы стилей, видео, скрипты и т. Д. Это событие onload.

Если вы ничего (или ничего слишком большого) на проводе не выборки, то вполне возможно, что оба события все, но одновременные, и вы можете просто запустить что-то в script теге в нижней части страница для работы.

Обратите внимание, что оба подхода, которые вы приняли, эквивалентны. Они оба являются «готовыми» обработчиками событий.

Сказав все это, ничто из этого не имеет отношения к вашей проблеме. $("btn") ничего не решит, потому что ваш селектор плох. Элемент не называется кнопкой. Вы, вероятно, означало идентификатор btn, в этом случае вы хотите сделать это $("#btn")

1

Вы всегда должны использовать $(document).ready(function(){}) для начальной загрузки приложения действительно, если нет особой необходимости не использовать его, как они будут выполнены, как только DOM готов к пересечению.

В ваших примерах, однако, ваши две функции выполняют то же самое, я предпочитаю использовать $(document).ready(), потому что он более явный и читаемый.

Причина, по которой ваш код не работает, заключается в том, что вы не использовали правильный селектор, используя $ ("btn"), который будет искать элементы html, например. но не найдет, потому что это недопустимый html. Вы должны использовать $("#btn"), чтобы выбрать свою кнопку. '#' используется для поиска идентификатора в то время как '.' может использоваться для выбора нескольких элементов с определенным атрибутом класса.

+0

+1 для подчеркивания важности ввода кода начальной загрузки в '$ (document) .ready()'. – nrodic

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