it-swarm.com.de

Warum funktioniert diese jQuery-Klickfunktion nicht?

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 kein Alarm ausgelöst und es wird nicht ausgeblendet. Ich habe die Konsole überprüft und es werden keine Fehler angezeigt. Ich habe auch nachgesehen, ob JQuery geladen wird und tatsächlich. Also nicht sicher, was das Problem ist. Ich habe auch eine Document Ready-Funktion mit einem Alert ausgeführt, und das hat funktioniert, ohne zu wissen, was ich falsch mache. Bitte helfen Sie. Vielen Dank!

109
starbucks

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

d.h.

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

As jQuery-Dokumentation gibt an: "Eine Seite kann nicht sicher manipuliert werden, bis das Dokument" fertig "ist. JQuery erkennt diesen Bereitschaftszustand für Sie. Code, der in $( document ).ready() enthalten ist, wird nur Führen Sie den Befehl aus, sobald die Seite "Document Object Model (DOM)" für die Ausführung von JavaScript-Code bereit ist.

167
mobius

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

endlich brauche ich nach 1 woche keinen onclick triger mehr hinzuzufügen. Ich hoffe, das wird vielen Menschen helfen

47
user5636597

Ihr Code funktioniert möglicherweise ohne document.ready (). Stellen Sie nur sicher, dass Ihr Skript hinter dem #clicker steht. Zur Kasse gehen: http://jsbin.com/aPAsaZo/1/

Die Idee im fertigen Konzept. Wenn Sie sicher sind, dass Ihr Skript das Neueste auf Ihrer Seite ist oder nach dem betroffenen Element steht, 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: Ersetzen Sie in der jsbin -Demo http durch https im Code. oder benutze diese Variante Demo

21
SaidbakR

Sie müssen Ihren Javascript-Code mit $(document).ready(function(){}); umschließen. Schauen Sie sich das an JSfiddle .

JS-Code:

$(document).ready(function() {

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

Versuchen Sie, $(document).ready(function(){ am Anfang Ihres Skripts einzufügen, und dann });. Enthält das div die ID ordnungsgemäß, d. H. Als ID, nicht als Klasse usw.?

5
tjons

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

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

Vergewissern Sie sich, dass sich auf Ihrer Schaltfläche nichts befindet (z. B. ein Div oder ein durchsichtiges Bild), das ein Klicken auf die Schaltfläche verhindert. Es klingt dumm, aber manchmal denken wir, dass jQuery nicht funktioniert und alles, was dazugehört, und das Problem liegt in der Positionierung von DOM-Elementen.

3
vicgilbcn

Nur eine kurze Überprüfung: Wenn Sie eine clientseitige Template-Engine wie z. B. einen Lenker verwenden, wird Ihr js nach document.ready geladen. Daher gibt es kein Element, an das Sie das Ereignis binden können. Verwenden Sie daher entweder den Onclick-Handler oder den Body und auf aktuelles Ziel prüfen

2
Abhinav Singh