jQuery wird nicht funktionieren mit einem Klick auf eine Schaltfläche

Ich habe ein Problem, kann nicht meinen Kopf wickeln! Ich versuche nur, test in meiner Konsole anzuzeigen, um zu sehen, ob mein Selektor funktioniert. Ich habe alles um ihn herum kommentiert, das ganze Skript, außer dem Selektor, aber es funktioniert immer noch nicht. Ich bin neu in jQuery, also habe ich etwas falsch umgesetzt? Hier ist mein Code:jQuery wird nicht funktionieren mit einem Klick auf eine Schaltfläche

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script type="text/javascript"> 

    $('#find').on("click", function(){ 
     console.log("test"); 
    }); 

</script> 
</head> 
<body> 
    <p>Postleitszahl:</p> 
    <input type="number" autocomplete="on" name="inp" class="inp"> 
    <button type="button" id="find">Finden</button> 
    <p class="outp"></p> 
</body> 
</html>

Quelle

2016-07-01 Niqql

$ ("#find") .click (function() { console.log ("Test"); }); –

Sie müssen warten, bis die Dom bereit sein, bevor Sie Ihren Handler anschließen - https://api.jquery.com/ready/ – billyonecan

Sie könnten Ihre script Block enthält die Funktion zum Boden des body bewegen:

<!-- other code --> 

<script type="text/javascript"> 
    $('#find').on("click", function(){ 
     console.log("test"); 
    }); 
</script>

ODER Sie $(document).ready() im head, wie diese verwendet werden könnten :

<!-- other code --> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#find').on("click", function(){ 
      console.log("test"); 
     }); 
    }) 

</script>

Der Grund ist, dass JavaScript die Elemente nicht erkennt, bevor sie in das DOM geladen wurden.

Weitere Informationen zum Laden von Skripten finden Sie unter here.

Quelle

2016-07-01 08:08:53 Jamb000h

Vielen Dank! Ich habe das $ (document) .ready() eingefügt und jetzt funktioniert es! :) – Niqql

Versuchen Sie diesen Code unten. Es sollte jetzt funktionieren.

$('#find').click(function() { 
 
    alert('button clicked!'); 
 
    console.log('test'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<p>Postleitszahl:</p> 
 
    <input type="number" autocomplete="on" name="inp" class="inp"> 
 
    <button type="button" id="find">Finden</button> 
 
    <p class="outp"></p>

Quelle

2016-07-01 07:53:45 claudios

können Sie diesen Code verwenden, es funktioniert!

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

    $('#find').on("click", function(){ 
     alert("test"); 
     console.log("test"); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>Postleitszahl:</p> 
    <input type="number" autocomplete="on" name="inp" class="inp"> 
    <button type="button" id="find">Finden</button> 
    <p class="outp"></p> 

</body> 
</html>

Quelle

2016-07-01 07:55:21 CodeMaker

jQuery wird nicht funktionieren mit einem Klick auf eine Schaltfläche

Antwort

Verwandte Themen