2016-04-12 15 views
1

Warum kann dieses Klickereignis Text in #output nicht ändern? Aber es ändert Text in #output, wenn ich Button-Tag außerhalb des Formular-Tags schreibe.jQuery-Button-Ereignishandler ändert den Inhalt nicht

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
</head> 
<body> 
<form> 
    <button id="compressStart">Start</button> 
</form> 
<p id="output"></p> 
<script src="js/jquery-2.2.3.js"></script> 
<script src="js/test.js"></script> 
</body> 
</html> 

JS

"use strict"; 

$(function() { 
    $("#compressStart").click(getDecompressInput); 

}); 

function getDecompressInput() { 
    $("#output").text('Hello'); 
} 
+0

denken, was ist eine Schaltfläche in einer Form tun soll, in der Regel? Senden Sie es (die Seite neu laden). Sie müssen verhindern, dass das Formular gesendet wird, oder das Formular entfernen, wenn Sie es nicht benötigen. – blex

Antwort

3

Da Sie <button></button> Element innerhalb des form verwenden, ist seine Standardverhalten das Formular abzuschicken.

Wenn Sie Taste wollen nicht das Formular sumbit, dann setzen Sie das Attribut type als button

<button type="button" id="compressStart">Start</button> 
+0

Schöne Antwort, ich denke es ist der Gute. Aber verwirrend: 'Wenn du das nicht willst, dann benutze, Knopftyp' ?? Er benutzt tatsächlich den Knopftyp. ;) – cor

+2

ok, jetzt ist es klarer. – cor

Verwandte Themen