Kapan saya harus menggunakan fungsi document.ready jQuery?

107

Saya diberitahu untuk menggunakan document.ready ketika saya pertama kali mulai menggunakan Javascript / jQuery tetapi saya tidak pernah benar-benar tahu mengapa.

Mungkinkah seseorang memberikan beberapa pedoman dasar tentang kapan masuk akal untuk membungkus kode javascript / jquery di dalam jQuery document.ready?

Beberapa topik yang saya minati:

  1. .on()Metode jQuery : Saya menggunakan .on()metode untuk AJAX cukup banyak (biasanya pada elemen DOM yang dibuat secara dinamis). Haruskah .on()penangan klik selalu menjadi dalam document.ready ?
  2. Kinerja: Apakah lebih baik menyimpan berbagai objek javascript / jQuery di dalam atau di luar document.ready (juga, apakah perbedaan kinerjanya signifikan?)?
  3. Cakupan objek: Halaman yang dimuat AJAX tidak dapat mengakses objek yang ada di dalam dokumen halaman sebelumnya. Sudah, benar? Mereka hanya dapat mengakses objek yang berada di luar document.ready (yaitu, objek yang benar-benar "global")?

Pembaruan: Untuk mengikuti praktik terbaik, semua javascript saya (pustaka jQuery dan kode aplikasi saya) ada di bagian bawah halaman HTML saya dan saya menggunakan deferatribut pada skrip yang mengandung jQuery pada halaman yang dimuat AJAX sehingga saya dapat mengakses perpustakaan jQuery di halaman ini.

javascript jquery dom event-handling document-ready tim peterson
sumber
2
Karena jika DOM belum siap, Anda mungkin mendapatkan hasil yang tidak diharapkan, itu saja.
Robert Harvey
1
2.- Baiklah saya gunakan di luar hanya untuk men-debug dan dapat memanggil beberapa var / fungsi dengan konsol,
jd_7
@RobertHarvey seperti apa hasil "tak terduga"? dapatkah anda memberikan contoh?
tim peterson
3
Anda mencoba memodifikasi elemen atau atribut yang belum sampai ke DOM.
Robert Harvey

Jawaban:

143

Dengan kata sederhana,

$(document).readyadalah acara yang menyala saat documentsiap.

Misalkan Anda telah menempatkan kode jQuery Anda di headbagian dan mencoba mengakses domelemen (jangkar, img dll), Anda tidak akan dapat mengaksesnya karena htmlditafsirkan dari atas ke bawah dan elemen html Anda tidak ada saat kode jQuery Anda lari.

Untuk mengatasi masalah ini, kami menempatkan setiap kode jQuery / javascript (yang menggunakan DOM) di dalam $(document).readyfungsi yang dipanggil ketika semua domelemen dapat diakses.

Dan inilah alasannya, ketika Anda menempatkan kode jQuery Anda di bagian bawah (setelah semua elemen dom, tepat sebelumnya </body>), tidak perlu$(document).ready

Tidak perlu menempatkan onmetode di dalam $(document).readyhanya ketika Anda menggunakan onmetode documentkarena alasan yang sama yang saya jelaskan di atas.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

EDIT

Dari komentar,

  1. $(document).readytidak menunggu gambar atau skrip. Itulah perbedaan besar antara $(document).readydan$(document).load

  2. Hanya kode yang mengakses DOM yang harus siap ditangani. Jika itu sebuah plugin, itu seharusnya tidak dalam acara siap.

Jashwant
sumber
@Dipaks Ya, kenapa tidak? Kami sangat terbiasa menggunakan $(document).ready. Lihat ini
Jashwant
Selama Anda memuat jQuery di headdan Anda skrip setelah elemen dimanipulasi, document.readytidak diperlukan. Gambar adalah kasus khusus meskipun ...
elclanrs
@elclanrs Lihat pertanyaan saya yang diperbarui. Saya memuat jQuery di bagian bawah halaman HTML saya dengan kode khusus aplikasi saya tepat setelah itu.
tim peterson
@Jashwant bagaimana dengan perbedaan kinerja dom.ready vs. tidak? Apakah itu relevan?
tim peterson
1
Kami tidak menempatkan semua jQuerykode di penangan siap. Hanya kode yang mengakses DOM. Jika itu sebuah plugin, seharusnya tidak ada dalam ready acara
Juan Mendes
7

Jawaban:

Metode .on () jQuery: Saya menggunakan metode .on () untuk AJAX (membuat elemen DOM secara dinamis). Haruskah penangan klik .on () selalu ada di dalam document.ready?

Tidak, tidak selalu. Jika Anda memuat JS Anda di kepala dokumen, Anda perlu. Jika Anda membuat elemen setelah halaman dimuat melalui AJAX, Anda harus melakukannya. Anda tidak perlu jika skrip berada di bawah elemen html, Anda juga akan menambahkan penangan.

Kinerja: Apakah lebih baik untuk menyimpan berbagai objek javascript / jQuery di dalam atau di luar document.ready (juga, apakah perbedaan kinerjanya signifikan?)?

Tergantung. Ini akan membutuhkan jumlah waktu yang sama untuk memasang penangan, itu hanya tergantung apakah Anda ingin itu terjadi segera saat halaman sedang dimuat atau jika Anda ingin menunggu sampai seluruh dokumen dimuat. Jadi itu akan tergantung pada hal-hal lain yang Anda lakukan di halaman.

Cakupan objek: Halaman yang dimuat AJAX tidak dapat mengakses objek yang ada di dalam dokumen halaman sebelumnya. Sudah, benar? Mereka hanya dapat mengakses objek yang berada di luar document.ready (yaitu, objek yang benar-benar "global")?

Ini pada dasarnya adalah fungsinya sendiri sehingga hanya dapat mengakses vars yang dideklarasikan pada lingkup global (di luar / di atas semua fungsi) atau dengan window.myvarname = '';

Justin
sumber
6

Sebelum Anda dapat menggunakan jQuery dengan aman, Anda perlu memastikan bahwa halaman dalam keadaan siap untuk dimanipulasi. Dengan jQuery, kita mencapai ini dengan meletakkan kode kita dalam sebuah fungsi, dan kemudian meneruskan fungsi itu ke $(document).ready(). Fungsi yang kita lewati hanya bisa menjadi fungsi anonim .

$(document).ready(function() {  
    console.log('ready!');  
});

Ini akan menjalankan fungsi yang kita teruskan ke .ready () setelah dokumen siap. Apa yang terjadi di sini? Kami menggunakan $ (document) untuk membuat objek jQuery dari dokumen halaman kami, dan kemudian memanggil fungsi .ready () pada objek itu, meneruskannya ke fungsi yang ingin kami jalankan.

Karena ini adalah sesuatu yang sering Anda lakukan, ada metode singkat untuk ini jika Anda lebih suka - fungsi $ () melakukan tugas ganda sebagai alias untuk $ (document) .ready () jika Anda meneruskannya ke fungsi:

$(function() {  
    console.log('ready!');  
});

Ini adalah bacaan yang bagus: Jquery Fundamentals

Tom Sarduy
sumber
3
Jangan bingung dengan (function($){ })(jQuery);mana yang membungkus kode Anda sehingga $ adalah jQuery di dalam penutupan itu
John Magnolia
3

Agar realistis, document.readytidak diperlukan hal lain selain memanipulasi DOM secara akurat dan tidak selalu diperlukan atau opsi terbaik. Yang saya maksud adalah ketika Anda mengembangkan plugin jQuery yang besar misalnya Anda hampir tidak menggunakannya di seluruh kode karena Anda mencoba membuatnya KERING, jadi Anda abstrak sebanyak mungkin dalam metode yang memanipulasi DOM tetapi dimaksudkan untuk dipanggil kemudian. Ketika semua kode Anda terintegrasi erat, satu-satunya metode yang terekspos document.readybiasanya adalah inittempat semua keajaiban DOM terjadi. Semoga ini menjawab pertanyaan Anda.

elclanrs
sumber
0

Anda harus mengikat semua tindakan di document.ready, karena Anda harus menunggu hingga dokumen dimuat sepenuhnya.

Tapi, Anda harus membuat fungsi untuk semua tindakan dan memanggilnya dari dalam dokumen. Sudah. Saat Anda membuat fungsi (objek global Anda), panggil mereka kapan pun Anda mau. Jadi, setelah data baru Anda dimuat dan elemen baru dibuat, panggil fungsi itu lagi.

Fungsi ini adalah fungsi tempat Anda mengikat peristiwa dan item tindakan.

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

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
Pulkit Mittal
sumber
0

Saya menambahkan tautan ke div dan ingin melakukan beberapa tugas dengan klik. Saya menambahkan kode di bawah elemen yang ditambahkan di DOM tetapi tidak berhasil. Ini kodenya:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

Tidak bekerja. Kemudian saya menempatkan kode jQuery di dalam $ (document) .ready dan itu bekerja dengan sempurna. Ini dia.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});
Safeer Ahmed
sumber
-2

Peristiwa siap terjadi ketika DOM (model objek dokumen) telah dimuat.

Karena peristiwa ini terjadi setelah dokumen siap, ini adalah tempat yang baik untuk memiliki semua peristiwa dan fungsi jQuery lainnya. Seperti contoh di atas.

Metode ready () menentukan apa yang terjadi ketika kejadian siap terjadi.

Tip: Metode ready () tidak boleh digunakan bersama dengan.

Shrikant Shiledar
sumber