jQuery - wiele $ (dokument). już…?

Pytanie:

Co się stanie, jeśli połączę dwa pliki JavaScript, oba z $(document).readyfunkcjami? Czy jedno zastępuje drugie? Czy oboje $(document).readyzostaną wezwani?

Na przykład,

<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!");
});

Jestem pewien, że najlepszą praktyką jest połączenie obu połączeń w jeden, $(document).readyale w mojej sytuacji nie jest to całkiem możliwe.

Wszystko zostanie wykonane i na podstawie pierwszego uruchomienia pierwszego uruchomienia !!

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

Demo Jak widać, nie zastępują się one nawzajem

Chciałbym też wspomnieć o jednej rzeczy

zamiast tego

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

możesz użyć tego skrótu

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

Ważne jest, aby pamiętać, że każde jQuery()połączenie musi faktycznie wrócić. Jeśli zostanie zgłoszony wyjątek w jednym, kolejne (niepowiązane) wywołania nigdy nie zostaną wykonane.

Dotyczy to niezależnie od składni. Można użyć jQuery(), jQuery(function() {}), $(document).ready(), cokolwiek chcesz, zachowanie jest takie samo. Jeśli wczesny nie powiedzie się, kolejne bloki nigdy nie zostaną uruchomione.

Był to dla mnie problem podczas korzystania z bibliotek innych firm. Jedna biblioteka zgłaszała wyjątek, a kolejne biblioteki nigdy niczego nie inicjowały.

$ (dokument) .ready (); jest taki sam jak każda inna funkcja. uruchamia się, gdy dokument jest gotowy - tzn. załadowany. pytanie dotyczy tego, co się stanie, gdy wiele $ (dokument) .ready () zostanie uruchomionych, a nie gdy uruchomisz tę samą funkcję w wielu $ (dokument) .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>');

});

oba będą zachowywać się dokładnie tak samo. jedyną różnicą jest to, że chociaż te pierwsze osiągną takie same wyniki. ten ostatni będzie działał o ułamek sekundy szybciej i wymaga mniej pisania. :)

podsumowując, tam gdzie to możliwe, używaj tylko 1 $ (dokument) .ready ();

// stara odpowiedź

Obaj zostaną wezwani w kolejności. Najlepszą praktyką byłoby ich połączenie. ale nie martw się, jeśli nie jest to możliwe. strona nie wybuchnie.

Wykonanie odbywa się z góry na dół. Kto pierwszy ten lepszy.

Jeśli kolejność wykonywania jest ważna, połącz je.

Oba zostaną wezwane, kto pierwszy, ten lepszy. Spójrz tutaj .

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

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

Wynik:

Wywołano dokument gotowy 2!

Aby nie nićść wątku, ale w najnowszej wersji jQuerysugerowanej składni jest:

$( handler )

Tak wyglądałoby użycie anonimowej funkcji

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

Zobacz ten link:

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