jQuery - multiple $ (dokumen). sudah ...?

359

Pertanyaan:

Jika saya menautkan dalam dua file JavaScript, keduanya dengan $(document).readyfungsi, apa yang terjadi? Apakah yang satu menimpa yang lain? Atau apakah keduanya $(document).readydipanggil?

Sebagai contoh,

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


Saya yakin ini adalah praktik terbaik untuk hanya menggabungkan kedua panggilan menjadi satu $(document).readytetapi itu tidak mungkin dalam situasi saya.

javascript jquery rlb.usa
sumber
Kemungkinan duplikat Bisakah Anda memiliki beberapa $ (dokumen). Sudah (fungsi () {...}); bagian?
JohnOsborne

Jawaban:

352

Semua akan dieksekusi dan Dipanggil pertama kali dijalankan !!

<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 Seperti yang Anda lihat mereka tidak saling menggantikan

Juga satu hal yang ingin saya sebutkan

di tempat ini

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

Anda dapat menggunakan pintasan ini

jQuery(function(){
   //dom ready codes
});
Praveen Prasad
sumber
66
atau bahkan lebih pendek $ (function () {// dom ready codes}); api.jquery.com/ready
davehale23
217
Ingat melihat $ (function () {// do stuff}); untuk pertama kalinya, dan seberapa sulitkah bagi Google penjelasannya? $ (dokumen). Sudah berkomunikasi jauh lebih banyak dengan sangat sedikit ...
Matt Montag
56
Pemungutan suara untuk kode yang singkat dan kurang dapat dibaca adalah pemungutan suara untuk terorisme.
FreeAsInBeer
10
Cara pintas tidak memberikan manfaat, tetapi menyebabkan kebingungan. Jika tujuan Anda adalah membuat kode Anda "lebih pendek" dalam hal waktu yang diperlukan untuk membaca, memahami, dan memelihara, maka pintasan ini akan menuntun Anda jauh-jauh.
jononomo
3
jika menggunakan jalan pintas itu jahat, orang harus menggunakanjQuery(document).ready(function(){ });
Memet Olsen
76

Penting untuk dicatat bahwa setiap jQuery()panggilan harus benar-benar kembali. Jika pengecualian dilemparkan dalam satu, panggilan berikutnya (tidak terkait) tidak akan pernah dieksekusi.

Ini berlaku terlepas dari sintaksis. Anda dapat menggunakan jQuery(), jQuery(function() {}), $(document).ready(), apa pun yang Anda suka, perilaku adalah sama. Jika yang awal gagal, blok berikutnya tidak akan pernah berjalan.

Ini masalah bagi saya saat menggunakan perpustakaan pihak ke-3. Satu perpustakaan melempar pengecualian, dan perpustakaan berikutnya tidak pernah menginisialisasi apa pun.

cjastram
sumber
2
Ini. Saya baru saja menghabiskan satu jam yang baik untuk mempersempit masalah sampai ke titik ini. Salah satu $(document).readypanggilan saya membuat kesalahan dan karena itu $(document).readyfungsi yang berbeda tidak pernah dipanggil. Itu membuatku gila.
scrollup
10
Ini bukan lagi masalahnya. Pada jQuery 3.0, jQuery memastikan bahwa pengecualian yang terjadi dalam satu penangan tidak mencegah penangan selanjutnya menambahkan untuk mengeksekusi. api.jquery.com/ready
Ravi Teja
32

$ (dokumen) .ready (); sama dengan fungsi lainnya. itu menyala setelah dokumen siap - yaitu dimuat. pertanyaannya adalah tentang apa yang terjadi ketika beberapa $ (dokumen). Sudah () dipecat bukan ketika Anda memecat fungsi yang sama dalam beberapa $ (dokumen). Sudah () 

//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>');

});

keduanya akan berperilaku sama persis. satu-satunya perbedaan adalah bahwa meskipun yang pertama akan mencapai hasil yang sama. yang terakhir akan menjalankan sepersekian detik lebih cepat dan membutuhkan lebih sedikit pengetikan. :)

dalam kesimpulan jika memungkinkan hanya menggunakan 1 $ (dokumen) .ready ();

// jawaban lama

Mereka berdua akan dipanggil secara berurutan. Praktik terbaik adalah menggabungkan mereka. tapi jangan khawatir jika itu tidak mungkin. halaman tidak akan meledak.

Ed Fryed
sumber
^^ edit milik saya karena saya pikir orang mungkin bingung antara menjalankan fungsi yang sama beberapa kali dan menjalankan fungsi yang berbeda dalam beberapa $ (dokumen). Sudah. ​​^^ semoga membantu.
Ed Fryed
21

Eksekusi dari atas ke bawah. Pertama datang pertama dilayani.

Jika urutan eksekusi itu penting, gabungkan mereka.

Diodeus - James MacFarlane
sumber
10

Keduanya akan dipanggil, pertama datang pertama dilayani. Coba lihat di sini .

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

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

Keluaran:

Siap untuk Dokumen 2 dipanggil!

Scoobler
sumber
2

Bukan untuk necro utas, tetapi di bawah versi terbaru dari jQuerysintaks yang disarankan adalah:

$( handler )

Menggunakan fungsi anonim, ini akan terlihat seperti

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

Lihat tautan ini:

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

Arlo Guthrie
sumber