jQuery - декілька $ (документ). вже…?

Питання:

Якщо я пов'язую два файли JavaScript, обидва з $(document).readyфункціями, що відбувається? Чи один перезаписує інший? Або обоє $(document).readyдзвонять?

Наприклад,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

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

Усі будуть виконані, і на першому заклику перший запуск !!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Демо Як бачите, вони не замінюють одне одного

Також одне, що я хотів би зазначити

замість цього

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

Ви можете скористатися цим ярликом

jQuery(function(){
   //dom ready codes
});

Важливо зазначити, що кожен jQuery()виклик повинен фактично повернутися. Якщо виняток буде передано в одному, наступні (не пов'язані) дзвінки ніколи не виконуватимуться.

Це стосується незалежно від синтаксису. Ви можете використовувати jQuery(), jQuery(function() {}), $(document).ready()все, що ви хочете, поведінка таке ж. Якщо раннє не вдалося, наступні блоки ніколи не будуть запускатися.

Це було проблемою для мене під час використання сторонніх бібліотек. Одна бібліотека кидала виняток, і наступні бібліотеки ніколи нічого не ініціалізували.

$ (документ) .ready (); те саме, що і будь-яка інша функція. він запускається, коли документ готовий - тобто завантажений. питання полягає в тому, що відбувається, коли декілька $ (документ) .pris () звільняються не тоді, коли ви запускаєте ту саму функцію в межах декількох $ (документ) .ready ()

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

обидва будуть вести себе точно так само. Єдина відмінність полягає в тому, що хоча перші досягнуть однакових результатів. останній запустить частку секунди швидше і вимагає меншої кількості тексту. :)

на завершення, коли це можливо, використовуйте лише 1 $ (документ) .ready ();

// стара відповідь

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

Виконання зверху вниз. Перший прийшов - перший отримав.

Якщо послідовність виконання важлива, комбінуйте їх.

Обоє зателефонують, першими приїжджають першими. Погляньте тут .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Вихід:

Документ готовий до 2-го!

Не обшивати нитку, але в останній версії jQueryзапропонованого синтаксису є:

$( handler )

Використовуючи анонімну функцію, це виглядатиме так

$(function() { ... insert code here ... });

Дивіться це посилання:

https://api.jquery.com/ready/