Wo im Code JavaScript einbinden

S

saebelzahntiger

Grünschnabel
Hallo,
mich interessiert, warum das folgenden Skript nicht funktioniert, wenn der JavaScript-Code, wie unten zu sehen, vor den Button eingefügt wird. Ich habe immer gedacht, dass es keine Rolle spielt, wo der Code steht, wenn die Seite vollständig geladen ist.

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>
Titel
</title>
<script language="javascript" type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
</head>
<body>

<script type="text/javascript">
$( "#button-test" ).click(function() {
   alert("Button wurde geklickt!");
});
</script>

<button id="button-test" name="einfacher-button" type="button" class="test" value="">Klick</button>

</body>
</html>

Viele Grüße
 
Das jQuery-Script funktioniert an dieser Stelle des Markups in Kombination mit $(document).ready():
Code: 
$( document ).ready(function() {
  $( "#button-test" ).click(function() {
    alert("Button wurde geklickt!");
  });
});
https://api.jquery.com/ready/
https://learn.jquery.com/using-jquery-core/document-ready/

Andernfalls ist zu diesem Zeitpunkt das Objekt mit der ID #button-test dem Script noch nicht bekannt, und es muß entsprechend am Dokumentende vor </body> platziert/aufgerufen werden, womit sichergestellt wird, dass die Seite vollständig geladen ist.
 
Zuletzt bearbeitet:
Hi

wenn deine Seite von oben nach unten abgearbeitet wird (auch der Browser macht nicht alles auf einmal)
ist "#button-test" im Script einfach noch nicht bekannt. Der Button mit der ID wird ja erst später erstellt.

saebelzahntiger hat gesagt.:
Ich habe immer gedacht, dass es keine Rolle spielt, wo der Code steht, wenn die Seite vollständig geladen ist.
Zum Vergrößern anklicken....
Ja, aber das ist sie bei dir noch nicht.
Um den Code an beliebige Stellen platzieren zu lönnen kannst du ihn mit JQuery in ein $(document).ready() verpacken - dann wird mit der Ausführung gewartet, bis die Seite wirklich bereit dafür ist. Ohne ready() geht es auch meistens, den Code am Ende, gerade ober </body>, zu platzieren.
 
Generell solltest du Javascript immer am Ende des Body´s packen - ein Browser liesst deine HTML Seite wie ein Buch von oben nach unten:
Code: 
<html>
<head>...</head>
<body>
   <div>...</div>
<script src="......./jquery.min.js" />
<script>
$(function() {
$( "#button-test" ).on('click touchstart', function() {
alert("Button wurde geklickt!");
});
});
</script>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück