JQuery事件添加小问题

代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变文本框大小</title>
<style type="text/css">
*{margin:0px;padding:0px;}
form{margin:40px 40px;border:1px solid #666;width:600px;}
.msg{margin:10px 10px;}
.changeBtn button{margin-left:8px;margin-bottom:8px;}
.comment{width:300px;height:170px;}
</style>
<script src="scripts/jquery-2.0.3源码.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var $comment=$(".comment");
            $(".smalle").click(function(){
                if($comment.height()>50){
                        $comment.height($comment.height()-50);
                    }
                });
            $(".big").click(function(){
                  if($comment.height()<500){
                     $comment.height($comment.height()+50);
                     }
                });

        });
</script>
</head>

<body>
<form>
    <div class="msg">
        <div class="changeBtn">
            <button class="smalle">缩小</button>
            <button class="big">放大</button>
        </div>
        <div >
            <textarea class="comment" >这里是我要评论的内容 </textarea>
        </div>
    </div>
</form>
</body>
</html>

为什么点击之后改变大小瞬间又被弹回原来的大小呢，求教！

var $comment=$(".comment");
这个写到两个独立的函数中

$comment 这个变量获取得了吗在click事件里面

button标签在标准浏览器是submit按钮，你的表单被提交了，要用type="button"或者阻止表单提交

             $(".smalle").click(function () {
                if ($comment.height() > 50) {
                    $comment.height($comment.height() - 50);
                }
                return false;//////////
            });
            $(".big").click(function () {
                if ($comment.height() < 500) {
                    $comment.height($comment.height() + 50);
                }
                return false;///////////
            });

var $comment=$(".comment");

$(document).ready(function(){
$(".smalle").click(function(){
if($(".comment").height()>50){
$(".comment").height($(".comment").height()-50);
}
});
$(".big").click(function(){
if($(".comment").height()<500){
$(".comment").height($(".comment").height()+50);
}
});

});