Dies ist der HTML-Code:
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<script src="vendor/jquery.js"></script>
<script>
$(document).ready($(".voice").click(function() {
alert("succeed");
}));
</script>
</head>
<body>
<div class="container">
<div class="voice-div">
<input type="text" class = "voice" />
</div>
</div>
</div><!-- close class="wrapper" -->
<!-- the support button on the top right -->
</body>
</html>
Als ich auf input geklickt habe, wurde alert nicht angezeigt. Aber wenn ich setze
<script>
$(document).ready($(".voice").click(function() {
alert("succeed");
}));
</script>
Kurz vor </body> hat es funktioniert. Warum? Wie soll ich den Code ändern, wenn ich das Skript in den Teil <head>...</head> einfügen möchte?
6 Antworten
Ich glaube nicht, dass Sie eine solche Ereignisdeklaration sofort in einen $(document).ready... -Block einbetten können. Versuchen Sie, Ihren Code wie folgt zu ändern:
$(document).ready(function () {
$(".voice").click(function() {
alert("succeed");
});
});
Oder Kurzform als:
$(function () {
$(".voice").click(function() {
alert("succeed");
});
});
Wenn Sie dies außerhalb der Bereitschaftsfunktion aufrufen möchten, können Sie so etwas versuchen
$(document).on("click",".voice",function()
{
alert ('called');
}) ;
In diesem Fall sollten Sie es nach einer Ajax-Anforderung weiterhin verwenden können, wenn Sie nach dem Erfolg von Ajax neue Elemente mit diesem Klassennamen anwenden.
Der Grund ist, dass Sie es nicht richtig codieren. Ändern Sie den Code in:
<script>
$(document).ready(function() {
$(".voice").click(function(){
alert("succeed");
});
});
</script>
In Ihrem Code haben Sie Folgendes eingegeben: $(".voice").click als Argument bereit, Aus diesem Grund führt Javascript es sofort nicht im Dokument aus. Es funktioniert bereits nach dem Body-Tag, aber nicht davor.
Sie müssen ready eine -Funktion übergeben.
Sie übergeben den Rückgabewert des Aufrufs an .click(). Folglich erfolgt der Versuch, den Klick-Handler zu binden, sofort (und schlägt fehl, da sich das Element noch nicht im DOM befindet), und die Funktion ready ignoriert den Wert, den Sie an ihn übergeben (da dies keine Funktion ist).
$(document).ready(
function () {
$(".voice").click(
function() {
alert("succeed");
}
);
}
);
Aber als ich direkt vor
</body>gesetzt habe, hat es funktioniert.
Dies liegt daran, dass die Elemente an diesem Punkt vorhanden sind. Die Bindung des fertigen Ereignisses schlägt weiterhin fehl, aber der Ausdruck, den Sie mit dem Rückgabewert erfolgreich übergeben haben, hat die Klickereignisse zuerst gebunden.
<script>
$(document).ready(function() {
$(".voice").click(function() {
alert("succeed");
});
});
</script>
Das Skript soll folgendermaßen aussehen:
$(document).ready(function() {
$(".voice").click(function() {
alert("succeed");
});
});
Es geht darum, Rückrufe hinzuzufügen, 'Objekte' zu funktionieren. Was Sie getan haben, war, die Funktionen (Klicken und dann Warnen) sofort beim Laden des Skripts aufzurufen und die Ergebnisse (falls vorhanden) als Argumente zu übergeben.