2016-04-12 13 views
1

このクリックイベントが#outputでテキストを変更できないのはなぜですか?しかし、フォームタグの外側にボタンタグを書くと#outputのテキストが変わります。jQueryボタンのイベントハンドラでコンテンツが変更されない

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

属性を設定する通常、行うことになっ形式のボタンが何であるか、と思いますか?それを提出してください(ページを再読み込みしてください)。フォームが送信されないようにするか、必要がない場合はフォームを削除する必要があります。 – blex

答えて

3

あなたはform<button></button>要素を使用しているので、そのデフォルトの動作では、フォームを送信することです。

フォームをsumbitしないボタンをしたい場合は、type

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

ニースの答え、私はそれが良いものだと思います。しかし、混乱している: 'あなたがそれを望んでいなければ、使用して、ボタンの種類を' ??彼は実際にボタンタイプを使用しています。 ;) – cor

+2

今、もっと明確です。 – cor

関連する問題