Jqueryのいくつかのイベントで複数の呼び出しを停止する方法は？

Question

私のページのテキスト領域から入力の長さをチェックしようとしています。このために、私は以下のように行っている：私はこれを行うと、「コメントボタンを追加」をクリックの上、私はそれより多くの場合は複数回の警告を取得

<script type="text/javascript"> 
    $(document).ready(function(){ 

    $('#reviews_comment').bind('input propertychange', function() { 

    var review = $('#reviews_comment').val() 
     if(review.length>=4){ 
      $('#comment_button').show(); 
      $('#comment_button').on('click',function(){ 
      alert($('#reviews_comment').val()); 
      }) 
     } 
     }) 

    }); 
    </script> 

：

<textarea id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea> 
    <button style="display: none;" id="comment_button" class="btn btn-success" >Add Comment</button> 

関連するスクリプトは下の通りです4文字入力します。しかし、もし私がちょうど4文字を入力すると、それは1回だけ警告します。また、私がreview.lengthに警告するとき、それは4から入力された文字数まで警告します。 ここで本当の問題は何ですか？どのような助けも高く評価されます。ありがとう。

Answer 1

あなたがテキストエリアに入力する文字ごとのクリックイベントを追加しています。クリックイベントは1つだけ追加する必要があります。イベント

$(document).ready(function() { 

    $('#reviews_comment').bind('input propertychange', function() { 

    var review = $('#reviews_comment').val() 
    if (review.length >= 4) { 
     $('#comment_button').show(); 

    } 
    }) 
    $('#comment_button').on('click', function() { 
    alert($('#reviews_comment').val()); 
    }) 
}); 

http://jsfiddle.net/7uj6xt68/

Answer 2

移動を結合：

$(document).ready(function() { 

     $('#reviews_comment').bind('input propertychange', function() { 

      var review = $('#reviews_comment').val() 
      if (review.length >= 4) { 
       $('#comment_button').show(); 

      } 
     }); 
     $('#comment_button').on('click', function() { 
      alert($('#reviews_comment').val()); 
     }); 

    }); 

デモ：http://jsfiddle.net/GCu2D/2208/イベントがテキストエリアに再び毎回ユーザーが何かをrebindedさ