Warum funktioniert diese jQuery-Klickfunktion nicht?

116

Code:

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

Der obige Code funktioniert nicht. Wenn ich auf #clicker klicke, wird es nicht alarmiert und nicht ausgeblendet. Ich habe die Konsole überprüft und erhalte keine Fehler. Ich habe auch überprüft, ob JQuery geladen wurde und tatsächlich. Also nicht sicher, was das Problem ist. Ich habe auch eine Dokumentbereitschaftsfunktion mit einer Warnung ausgeführt und das hat funktioniert, also nicht sicher, was ich falsch mache. Bitte helfen Sie. Vielen Dank!

javascript jquery onclick click onclicklistener Starbucks
quelle
3
Wickeln Sie den Code in document.ready
karthikr
1
Haben Sie die Konsole des Browsers überprüft, wenn Fehler, Syntax oder Datei nicht gefunden wurden oder etwas anderes?
Siddharth Pandey
1
Mögliches Duplikat von Warum findet jQuery oder eine DOM-Methode wie getElementById das Element nicht?
user4642212

Antworten:

179

Sie sollen den Javascript-Code in einen $(document).ready(function() {});Block einfügen .

dh

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

In der jQuery-Dokumentation heißt es: "Eine Seite kann erst dann sicher bearbeitet werden, wenn das Dokument" bereit "ist. JQuery erkennt diesen Bereitschaftszustand für Sie. Der darin enthaltene Code $( document ).ready()wird erst ausgeführt, wenn das Dokumentobjektmodell (DOM) für JavaScript bereit ist auszuführender Code "

Mobius
quelle
7
Wie dumm von mir!! Ich lerne immernoch. Ich dachte, ich brauche keine Klickfunktion, da sie beim Klicken gegen Dokument aktiviert wird. Bereits dort, wo sie beim Laden der Seite geladen wird.
Starbucks
7
@starbucks Mach dir keine Sorgen, jeder macht Fehler, und besonders beim Lernen :)
Mobius
4
Die Dokumentbereitschaftsfunktion richtet die Listener basierend auf den Informationen auf der Seite ein. Wenn Sie dies nicht tun, werden sie nie eingerichtet. Der beste Weg, dies zu tun, besteht jedoch darin, sie stattdessen mit der Funktion "on ()" zu delegieren. Auf diese Weise funktionieren alle Elemente, die der Seite nach dem Laden hinzugefügt wurden, weiterhin!
Sean Kendle
1
Mit der Funktion "Ein" müssen Sie die Dokumentbereitschaftsfunktion nicht verwenden. Der Listener wird auf Dokumentebene gesetzt und anschließend die Seite nach den Elementen durchsucht, die abgehört werden sollen. Aus diesem Grund ist es etwas schneller, etwas genauer zu bestimmen, welchen Elementtyp Sie anhören möchten, z. B. "div.listentome" im Gegensatz zu ".listentome". Anstatt jedes Element auf die Klasse "listentome" zu überprüfen, werden in diesem Beispiel nur die divs überprüft.
Sean Kendle
2
@ SeanKendle - So .on()funktioniert das nicht . Sie können es (optional) verwenden, um delegierte Handler zu erstellen, aber so oder so "kratzt" die Seite nicht, sondern bindet einen Listener an die spezifischen Elemente in dem jQuery-Objekt, für das Sie es aufrufen.
nnnnnn
65

Ich habe die beste Lösung für dieses Problem gefunden, indem ich ON mit $ (document) verwendet habe.

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

für id beginnen mit siehe unten:

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

nach 1 woche muss ich endlich keinen onclick triger hinzufügen. Ich hoffe das wird vielen Menschen helfen

user5636597
quelle
2
Ah danke, das oben genannte hat bei mir nicht funktioniert, aber das hat funktioniert! (wahrscheinlich eine seltsame Interaktion mit Winkel und Routing)
Flink
Genau wie Flink habe ich auch das Problem damit gelöst. Danke .. 100 upvote ..
Zeta
3
Es heißt Delegation und wird für dynamisch eingefügte oder verschobene Inhalte benötigt
mplungjan
Dieser hat für mich gearbeitet! Danke :)
Amrit Pal Singh
20

Ihr Code funktioniert möglicherweise ohne document.ready (). Stellen Sie nur sicher, dass sich Ihr Skript hinter dem #clicker befindet. Testen Sie diese Demo: http://jsbin.com/aPAsaZo/1/

Die Idee im fertigen Konzept. Wenn Sie sicher sind, dass Ihr Skript das Neueste auf Ihrer Seite ist oder hinter dem betroffenen Element liegt, funktioniert es.

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

Hinweis: In derjsbinDemo ersetzen httpmit httpsdort im Code, oder verwenden Sie diese Variante Demo

SaidbakR
quelle
11
+1 - Ihre Antwort erklärt, warum man die document.ready()Funktion braucht .
Kevin
1
Dies ist eine bessere Antwort, da der Vorschlag, dass sich das Abfrageskript in einer Funktion 'document.ready ()' befinden muss, irreführend ist. Ja, dort ist es sicherer, aber wenn Sie das HTML-Element für eine JQuery-Funktion im laufenden Betrieb einrichten (z. B. eine Tabellenzeile abfragen, je nachdem, auf welche Schaltfläche geklickt wird), muss es sich außerhalb / nach dieser Funktion befinden. Ich habe fälschlicherweise den Namen des Ziel-Div für meine Popup-Overlays geändert und dann mehrere frustrierende Stunden damit verbracht, nach einem Skriptfehler zu suchen. Große Lektion gelernt.
Johnlholden
Dies ist eine falsche Antwort, da sich der JS-Code im Kopf des DOM und nicht inline befinden sollte. Die Tatsache, dass Sie mehrere Stunden lang nach dem Skriptfehler gesucht haben, ist kein JS-Problem. Es ist Ihr Problem, die Dokumente nicht richtig zu lesen und nicht zu wissen, wie Debug-Tools verwendet werden.
Andrey Shipilov
@AndreyShipilov Wer das gesagt hat, schauen Sie sich einfach die Quelle dieser Seite an und gehen Sie nach unten. Dort sehen Sie Javascript-Code.
SaidbakR
1
@AndreyShipilov - Wissen Sie , wie Sie Debug-Tools verwenden, um dieses Problem zu beheben ? Dann teilen Sie bitte Ihr Wissen mit anderen, anstatt sie zu beleidigen. Versuche konstruktiv und fair zu sein.
Matt
6

Sie müssen Ihren Javascript-Code mit $(document).ready(function(){});Look this JSfiddle umschließen .

JS-Code:

$(document).ready(function() {

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

Versuchen Sie $(document).ready(function(){, am Anfang Ihres Skripts hinzuzufügen , und dann });. Hat der divdie ID auch richtig, dh als ID, nicht als Klasse usw.?

tjons
quelle
3

Stellen Sie sicher, dass sich auf Ihrer Schaltfläche nichts befindet (z. B. ein div oder ein durchsichtiges Bild), das das Klicken auf die Schaltfläche verhindert. Es klingt dumm, aber manchmal denken wir, dass jQuery nicht funktioniert und all das Zeug und das Problem liegt in der Positionierung von DOM-Elementen.

vicgilbcn
quelle
oder zum Beispiel Z-Index!
ein Darren
3

Sie können verwenden, $(function(){ // code });was ausgeführt wird, wenn das Dokument bereit ist, den Code in diesem Block auszuführen.

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

Nur eine kurze Überprüfung: Wenn Sie eine clientseitige Vorlagen-Engine wie einen Lenker verwenden, wird Ihr js nach dem Dokument geladen. Es gibt also kein Element, an das das Ereignis gebunden werden kann. Verwenden Sie daher entweder den onclick-Handler oder den Body und auf aktuelles Ziel prüfen

Abhinav Singh
quelle
so wahr, ich benutze flask / jinja und es funktioniert nur, wenn ich die onclick-Eigenschaft im HTML verwende und von dort auf eine Funktion in meinem <script> verweise
Rich Stone