jQuery Refresh Captcha is Reloading Page

Question

このコードを見て、#cap-imgソースをリフレッシュするのではなく、#reloadクリックイベントがページ全体をリロードしている理由を教えてください。

<div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon" id="input-group-addon-captcha"><img id="cap-img" src="captcha.php"></span> 
     <input id="seo-captcha" name="" class="form-control" placeholder="Please Enter Text" type="text"> 
     <span class="input-group-addon seo-addon-right"><button class="btn btn-xs btn-q" id="reload"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 
     </button></span> 
    </div> 
</div> 

    <script> 
    $(function() {    
    $('#reload').click(function(){ 
    $('#cap-img').attr('src', 'captcha.php?' + (new Date).getTime()); 
    }); 
    }); 
</script> 

Answer 1

ボタンはフォームの一部であり、フォームはデフォルトでサブミットハンドラとして取り込まれているものとします。これを試してみてください：ここで、この例の

$('#reload').click(function(e){ 
    e.preventDefault(); 
    $('#cap-img').attr('src', 'captcha.php?' + (new Date).getTime()); 
}); 

Plunker：http://plnkr.co/edit/y62jdX6sGsU8IQFJPmDz?p=preview