javascript - 如何停止对 Jquery 中某些事件的多次调用？

Question

我正在尝试检查页面中文本区域的输入长度。为此，我做了如下操作:

    <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>

相关脚本如下:

  <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>

当我这样做时，点击“添加评论按钮”时，如果输入的字母超过 4 个，我会多次收到警报。但如果我只输入 4 个字母，那么它只会提醒一次。另外，当我提醒 review.length 时，它会提醒从 4 到输入的字母数。这里真正的问题是什么？非常感谢任何形式的帮助。谢谢。

Answer 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/