/ / So integrieren Sie JQuery-Code ohne Code in die HTML-Datei - Javascript, JQuery, HTML

Wie man jQuery-Code ohne Code in die HTML-Datei integriert - javascript, jquery, html

Ich möchte meinen Code ein wenig löschen und meinen JQuery-Code ohne Funktionsaufruf in der HTML-Datei ausführen. Mein aktueller Code lautet:

HTML:

<head>
<script src="js/colorpick.js"></script>
<script>
$(document).ready(function() {
colorpick_start();
});
</script>
</head>

JS:

function colorpick_start() {
...
}

Aber wenn ich zum Beispiel eine Warnung in die erste Zeile des js ohne Funktionsaufruf schreibe, funktioniert das.

alert("test");

function colorpick_start() {
...
}

Dies funktioniert jedoch nicht für JQuery-Selektoren oder ähnliches. Gibt es eine Lösung, um meine JQuery ohne Code in der HTML-Datei zum Laufen zu bringen?

Ich möchte, dass meine HTML-Datei so aussieht, wenn dies möglich ist:

<head>
<script src="js/colorpick.js"></script>
</head>

Antworten:

1 für die Antwort № 1

Um dies zu erreichen:

<head>
<script src="js/colorpick.js"></script>
</head>

Verschieben Sie den dokumentfertigen Aufruf in die js-Datei, auf die Sie in Ihrer HTML-Datei verweisen, und stellen Sie sicher, dass die aufgerufene Methode vorhanden ist.

$(document).ready(function() {
colorpick_start();
});

Das sollte so sein.


2 für die Antwort № 2

Das

$(document).ready(function() {

Wartet, bis das DOM für Selektoren usw. bereit ist.

Wenn Sie das hinzufügen

$(document).ready(function() {

In Ihrer Datei colorpick.js wird darauf gewartet, dass das DOM bereit ist, und dann colorpick_start () ausgeführt.

Und glauben Sie mir, das fängt die meisten Leute auf, wenn sie anfangen, JQuery zu verwenden.


1 für die Antwort № 3

Setzen Sie Ihr Skript

<script src="js/colorpick.js"></script>

Vor </body> Etikett. Dadurch wird sichergestellt, dass Ihre Seite vollständig geladen ist, bevor das Skript gestartet wird.

 $(document).ready(function() {
colorpick_start();
});

Dieser Code funktioniert, weil Sie Ihren anrufenFunktion nach dem Laden des Dokuments. Das Laden von Dokumenten ist ein Ereignis. Sie können Ihre Funktion auf jedes gewünschte Ereignis setzen, aber sie startet nicht, wenn Sie nur Ihre Funktion definieren. Sie müssen Ihre Funktion irgendwie aufrufen. Beispiel wäre auf Klick (oder beim Laden von Dokumenten)

  <div id="example"></div>


$("#example").on("click", function () {

your function here

});

0 für die Antwort № 4

Verwenden Sie diesen Code:

$(function(){
$(".colorpicker").val("colorpicker"); //or whatever you like
});

Plnkr Beispielcode