Bu jQuery tıklama işlevi neden çalışmıyor?

116

Kod:

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

Yukarıdaki kod çalışmıyor. #Clicker'a tıkladığımda uyarı vermiyor ve gizlenmiyor. Konsolu kontrol ettim ve hiç hata almadım. Ayrıca JQuery'nin yüklenip yüklenmediğini ve gerçekten yüklenip yüklenmediğini kontrol ettim. Yani sorunun ne olduğundan emin değilim. Ayrıca bir uyarı ile bir belge hazır işlevi yaptım ve bu, ne yaptığımdan emin olamayacak kadar çalıştı. Lütfen yardım et. Teşekkürler!

— starbucks
kaynak

3

Kodu document.ready

— karthikr

1

Herhangi bir hata, sözdizimi veya dosya bulunamadı veya başka bir şey varsa tarayıcının konsolunu kontrol ettiniz mi?

— Siddharth Pandey

1

Olası yinelenen neden böyle eleman bulamıyor getElementById olarak jQuery veya DOM yöntemi nedir?

— user4642212

180

Javascript kodunu bir $(document).ready(function() {});bloğa eklemeniz gerekiyor .

yani

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

As jQuery belgelerine devletler: Hazır "Bir sayfalık bir belge kadar güvenle manipüle edilemez '' jQuery sizin için hazır bu durumu algılar Kod içeride dahil.. $( document ).ready()Sadece sayfa Belge Nesne Modeli (DOM) bir kez çalışacak JavaScript hazır çalıştırılacak kod "

— mobius
kaynak

7

Ne kadar aptalım !! Hala öğreniyorum. Tıklama işlevine ihtiyacım olmadığını düşündüm, çünkü vs belgeye tıklandığında etkinleştirildi. Zaten sayfa yüklemesinde yüklendiği yere.

— starbucks

7

@starbucks Bu konuda çok endişelenmeyin, herkes hata yapar ve özellikle öğrenirken :)

— mobius

4

Belge hazır işlevi, sayfada bulduklarına göre dinleyicileri ayarlar. Bunu yapmazsanız, asla kurulmazlar. Ancak bunu yapmanın en iyi yolu, bunun yerine onları "on ()" işleviyle yetkilendirmektir. Bu şekilde, yüklemeden sonra sayfaya eklenen tüm öğeler yine de çalışacaktır!

— Sean Kendle

1

Ayrıca, "açık" işlevi ile, belge hazır işlevini kullanmanıza gerek yoktur. Dinleyiciyi belge düzeyine ayarlar ve ardından öğelerin dinlemesi için sayfayı kopyalar. Bu nedenle, dinlemek istediğiniz öğe türü hakkında biraz daha spesifik olmak, ".listentome" yerine "div.listentome" gibi biraz daha hızlıdır. "Listentome" sınıfı için her öğeyi kontrol etmek yerine, bu örnekte yalnızca div'leri kontrol eder.

— Sean Kendle

2

@SeanKendle - Bu böyle yürümüyor .on(). Onu (isteğe bağlı olarak) temsilci işleyicileri oluşturmak için kullanabilirsiniz, ancak her iki şekilde de "sayfayı kazımaz", bir dinleyiciyi çağırdığınız jQuery nesnesindeki belirli öğelere / öğelere bağlar.

— nnnnnn

65

$ (Document) ile ON kullanarak bu sorun için en iyi çözümü buldum.

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

id ile başlamak için aşağıya bakın:

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

nihayet 1 hafta sonra onclick tetikleyici eklememe gerek yok. Umarım bu birçok insana yardımcı olur

— user5636597
kaynak

2

Ah teşekkürler, yukarıdakiler benim için işe yaramadı, ama bu işe yaradı! (muhtemelen açısal ve yönlendirmeyle bazı garip etkileşim)

— Flink

Flink gibi ben de bununla sorunu çözdüm. Teşekkürler .. 100 olumlu oy ..

— Zeta

3

Buna delegasyon denir ve dinamik olarak eklenen veya taşınan içerik için gereklidir

— mplungjan

Bu benim için çalıştı! Teşekkürler :)

— Amrit Pal Singh

20

Kodunuz document.ready () olmadan çalışabilir, sadece komut dosyanızın #clicker'dan sonra olduğundan emin olun. Bu demoyu inceleyin: http://jsbin.com/aPAsaZo/1/

Ready konseptindeki fikir. Komut dosyanızın sayfanızdaki en son şey olduğundan veya etkilenen öğeden sonra olduğundan eminseniz, çalışacaktır.

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

Uyarı: Injsbindemo yerini httpile httpskodunda var mı yoksa bu varyasyonu kullanacak Demosu

— SaidbakR
kaynak

11

+1 - Cevabınız neden document.ready()işleve ihtiyaç duyulduğunu açıklıyor .

— Kevin

1

Bu daha iyi bir cevaptır çünkü jquery betiğinin bir 'document.ready ()' fonksiyonu içinde olması gerektiği önerisi yanıltıcıdır. Evet, orada daha güvenlidir, ancak html öğesini anında bir jquery işlevi için ayarlarsanız (örneğin, hangi düğmeye tıklandığına bağlı olarak bir tablo satırını sorgulamak gibi), bu işlevin dışında / sonrasında olması gerekir. Açılır kaplamalarım için hedef div'in adını yanlışlıkla değiştirdim ve ardından bir komut dosyası hatası arayarak sinir bozucu birkaç saat geçirdim. Büyük ders alındı.

— johnlholden

Bu yanlış bir yanıttır, çünkü JS kodu DOM'un başında olmalı ve satır içi olmamalıdır. Komut dosyası hatasını aramak için birkaç saat harcadığınız gerçeği bir JS problemi değil, dokümanları düzgün okumamak ve hata ayıklama araçlarını nasıl kullanacağınızı bilmemek sizin sorununuzdur.

— Andrey Shipilov

@AndreyShipilov Kim demiş ki, sadece bu sayfanın kaynağına bakın ve altına gidin, orada javascript kodunu göreceksiniz.

— SaidbakR

1

@AndreyShipilov - do sen bu sorunu gidermek için hata ayıklama araçları kullanmayı biliyor? Öyleyse lütfen bilgilerinizi onları gücendirmek yerine başkalarıyla paylaşın. Yapıcı ve adil olmaya çalışın.

— Matt

6

Javascript- Code'unuzu$(document).ready(function(){}); Look this JSfiddle ile sarmalısınız .

JS Kodu:

$(document).ready(function() {

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

— Kara koyun
kaynak

5

$(document).ready(function(){Komut dosyanızın başına eklemeyi deneyin ve ardından });. Ayrıca, divid'nin içinde düzgün bir şekilde var mı, yani sınıf olarak değil, bir id olarak mı?

— tjonların
kaynak

3

Düğmenizde, düğmeyi tıklamaktan alıkoyan hiçbir şey (böyle bir div veya şeffaf resim) olmadığından emin olun. Kulağa aptalca geliyor, ancak bazen jQuery'nin çalışmadığını ve tüm bu sorunların olduğunu ve sorunun DOM öğelerinin konumlandırılmasında olduğunu düşünüyoruz.

— vicgilbcn
kaynak

veya örneğin, z-endeksi!

— a darren

3

$(function(){ // code });Doküman bu blok içindeki kodu yürütmeye hazır olduğunda hangisinin yürütüleceğini kullanabilirsiniz .

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

— Rakyesh Kadadas
kaynak

2

Hızlı bir kontrol, eğer gidon gibi istemci tarafı şablonlama motoru kullanıyorsanız, j'leriniz belgeden sonra yüklenecektir. Zaten, bu nedenle olayı bağlayacak herhangi bir öğe olmayacaktır, bu nedenle ya onclick işleyiciyi kullanın ya da vücutta kullanın ve mevcut hedefi kontrol edin

— Abhinav Singh
kaynak

çok doğru, flask / jinja kullanıyorum ve HTML'deki onclick özelliğini kullanıp oradan <script>

— Rich Stone