Mengapa fungsi klik jQuery ini tidak berfungsi?

116

Kode:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

Kode di atas tidak berfungsi. Ketika saya mengklik #clicker, itu tidak mengingatkan dan tidak bersembunyi. Saya memeriksa konsol dan tidak ada kesalahan. Saya juga memeriksa untuk melihat apakah JQuery sedang dimuat dan memang demikian. Jadi tidak yakin apa masalahnya. Saya juga melakukan fungsi siap dokumen dengan peringatan dan berfungsi jadi tidak yakin apa yang saya lakukan salah. Tolong bantu. Terima kasih!

javascript jquery onclick click onclicklistener starbucks
sumber
3
Bungkus kode dalam dokumen.
Sudah
1
apakah Anda memeriksa konsol browser jika ada kesalahan, sintaks atau file tidak ditemukan atau yang lainnya?
Siddharth Pandey
1
Kemungkinan duplikat dari Mengapa jQuery atau metode DOM seperti getElementById tidak menemukan elemen?
pengguna4642212

Jawaban:

180

Anda seharusnya menambahkan kode javascript dalam satu $(document).ready(function() {});blok.

yaitu

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Seperti dokumentasi jQuery menyatakan: "Sebuah halaman tidak dapat dimanipulasi dengan aman sampai dokumen" siap ". JQuery mendeteksi keadaan kesiapan ini untuk Anda. Kode yang disertakan di dalamnya $( document ).ready()hanya akan berjalan setelah halaman Document Object Model (DOM) siap untuk JavaScript kode untuk mengeksekusi "

mobius
sumber
7
Betapa bodohnya aku !! Masih belajar. Saya pikir saya mengklik fungsi tidak memerlukannya karena diaktifkan saat mengklik dokumen vs. Sudah di mana itu dimuat saat memuat halaman.
Starbucks
7
@starbucks Jangan terlalu khawatir, semua orang membuat kesalahan, dan terutama saat belajar :)
mobius
4
Fungsi dokumen siap mengatur pendengar berdasarkan apa yang ditemukannya di halaman. Jika Anda tidak melakukan ini, mereka tidak pernah disiapkan. Namun, cara terbaik untuk melakukan ini adalah dengan mendelegasikannya dengan fungsi "on ()". Dengan begitu, elemen apa pun yang ditambahkan ke halaman setelah pemuatan akan tetap berfungsi!
Sean Kendle
1
Selain itu, dengan fungsi "on", Anda sebenarnya tidak perlu menggunakan fungsi siap dokumen. Ini mengatur pendengar ke tingkat dokumen, dan kemudian menyalin halaman untuk elemen yang akan didengarkan. Itulah mengapa akan lebih cepat untuk menjadi sedikit lebih spesifik tentang jenis elemen yang ingin Anda dengarkan, seperti "div.listentome" sebagai lawan ".listentome". Alih-alih memeriksa setiap elemen untuk kelas "listentome", ia hanya memeriksa div, dalam contoh ini.
Sean Kendle
2
@SeanKendle - Itu bukan cara .on()kerjanya. Anda dapat (secara opsional) menggunakannya untuk membuat penangan yang didelegasikan, tetapi bagaimanapun juga itu tidak "mengikis halaman", itu mengikat pendengar ke elemen tertentu di objek jQuery tempat Anda memanggilnya.
nnnnnn
65

Saya menemukan solusi terbaik untuk masalah ini dengan menggunakan ON dengan $ (dokumen).

 $(document).on('click', '#yourid', function() { alert("hello"); });

untuk id mulai dengan lihat di bawah ini:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

akhirnya setelah 1 minggu saya tidak perlu menambahkan onclick triger. Saya harap ini akan membantu banyak orang

pengguna5636597
sumber
2
Ah terima kasih, hal di atas tidak berhasil untuk saya, tetapi ini berhasil! (mungkin beberapa interaksi aneh dengan sudut dan perutean)
Flink
Sama seperti Flink, saya juga memecahkan masalah ini. Terima kasih .. 100 suara positif ..
Zeta
3
Ini disebut delegasi dan diperlukan untuk konten yang disisipkan atau dipindahkan secara dinamis
mplungjan
Yang ini berhasil untuk saya! Terima kasih :)
Amrit Pal Singh
20

Kode Anda mungkin berfungsi tanpa document.ready () hanya pastikan bahwa skrip Anda setelah #clicker. Lihat demo ini: http://jsbin.com/aPAsaZo/1/

Ide dalam konsep siap. Jika Anda yakin bahwa skrip Anda adalah yang terbaru di halaman Anda atau setelah elemen yang terpengaruh, itu akan berfungsi.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

PEMBERITAHUAN: Dijsbinganti demo httpdengan yang httpsada di kode, atau gunakan Demo varian ini

SaidbakR
sumber
11
+1 - Jawaban Anda menjelaskan mengapa seseorang membutuhkan document.ready()fungsi tersebut.
Kevin
1
Ini adalah jawaban yang lebih baik karena saran bahwa skrip jquery harus berada dalam fungsi 'document.ready ()' menyesatkan. Ya, lebih aman di sana, tetapi jika Anda mengatur elemen html untuk fungsi jquery dengan cepat (seperti kueri baris tabel tergantung pada tombol apa yang diklik), itu harus di luar / setelah fungsi itu. Saya keliru mengubah nama div target untuk overlay pop-up saya dan kemudian menghabiskan beberapa jam frustasi untuk mencari kesalahan skrip. Pelajaran besar yang dipelajari.
johnlholden
Ini adalah jawaban yang salah, karena kode JS harus berada di head DOM dan tidak sebaris. Fakta bahwa Anda menghabiskan beberapa jam mencari kesalahan skrip bukanlah masalah JS, ini masalah Anda karena tidak membaca dokumen dengan benar dan tidak mengetahui cara menggunakan alat debug.
Andrey Shipilov
@AndreyShipilov Siapa bilang, lihat saja sumber halaman ini dan turun ke bawah, Anda akan melihat kode javascript di sana.
SaidbakR
1
@AndreyShipilov - apakah Anda tahu cara menggunakan alat debug untuk memecahkan masalah ini? Kemudian tolong bagikan pengetahuan Anda dengan orang lain daripada menyinggung perasaan mereka. Cobalah bersikap konstruktif dan adil.
Matt
6

Anda harus membungkus Kode-Javascript Anda dengan $(document).ready(function(){});Lihat JSfiddle ini .

Kode JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});
Kambing hitam
sumber
5

Coba tambahkan $(document).ready(function(){ke awal skrip Anda, lalu });. Juga, apakah divmemiliki id di dalamnya dengan benar, yaitu sebagai id, bukan kelas, dll.?

tjons
sumber
3

Pastikan tidak ada apa pun di tombol Anda (seperti div atau img transparan) yang mencegah mengklik tombol. Kedengarannya bodoh, tetapi terkadang kami berpikir bahwa jQuery tidak berfungsi dan semua itu terjadi dan masalahnya ada pada posisi elemen DOM.

vicgilbcn.dll
sumber
atau, misalnya, z-index!
seorang darren
3

Anda dapat menggunakan $(function(){ // code });yang dieksekusi ketika dokumen siap untuk mengeksekusi kode di dalam blok itu.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});
Rakyesh Kadadas
sumber
2

Sekadar pemeriksaan singkat, jika Anda menggunakan mesin template sisi klien seperti setang, js Anda akan dimuat setelah document.ready, maka tidak akan ada elemen untuk mengikat acara tersebut, oleh karena itu gunakan penangan onclick atau gunakan di body dan periksa target saat ini

Abhinav Singh
sumber
jadi benar, saya menggunakan flask / jinja dan itu tidak berfungsi kecuali saya menggunakan properti onclick di HTML dan merujuk dari sana ke fungsi di <script> saya
Rich Stone