jQuery-隐藏显示无法在Chrome中正常运行（只能运行一次）

Question

Just wrote a jquery to show a comment button, when click on the textarea. Hide comment button clicking on somewhere else in the screen. Its working fine in Firefox. But in Chrome it working only once. When I click on textarea again the submit button is not showing, its still hidden.

$(document).on('click', ".comment_txt, .comment_btn", function() {
  var post_id = $(this).attr("post-id");      
  $("#comment_btn_div_"+post_id).show();
});
$('body').click(function() {
  $(".comment_btn").hide()
});


<form class="comment_submit" action="http://localhost:3000/api/v2/posts/48774/comment" data-post-id="48774" id="comment_form_48774">
    <textarea post-id="48774" id="comment_txt_48774" placeholder="Comment" cols="40" rows="1" class="width100 comment_txt"></textarea>
    <div id="comment_btn_div_48774" class="right comment_btn" post-id="48774" style="display:none">
      <button onclick="$(this).text('commenting...')" class="btn btn-small btn-info right" id="comment_btn_48774" type="submit">Comment</button>
    </div>
</form>

Not sure why this is not working in Chrome. There are many form in my page. So I have did $(".comment_btn").hide() on body click. In order to show a particular comment button i'm using this code $("#comment_btn_div_"+post_id).show();

Update:

After the comment button is hidden, Even when i do a $("#comment_btn_div_23232").show() from firebug console. Its not showing the div.

Update 2 (testing with alert):

$(document).on('click', ".comment_txt, .comment_btn", function() {
  alert("commenttext area clicked");
  $(".comment_btn").show()
});
$('body').click(function() {
  alert("body clicked");
  $(".comment_btn").hide()
});

1. Clicked textarea, got alert a. body clicked b. commenttext area clicked. Now comment button is shown
2. Clicked body got alert a. body clicked. Now Comment button is hidden
3. Clicked textarea, got alert a. body clicked b. commenttext area clicked. Now comment button is not shown .

Thanks!

Answer 1

Try it with blur

$(document).on('click', ".comment_txt, .comment_btn", function () {
    var post_id = $(this).attr("post-id");
    $("#comment_btn_div_" + post_id).show();
});

$('.comment_txt').blur(function () {
    $(".comment_btn").hide()
});

FIDDLE

Answer 2

I run into this every once in a while. Have yet to figure out why it happens; it befuddles me. I solve it by using one of the other ways of "showing" divs. Most recently, I changed the css display property:

$("#comment_btn_div_"+post_id).css('display','block');

Answer 3

var post_id=null;
$(document).on('click', ".comment_txt, .comment_btn", function(event) {
  post_id = $(this).attr("post-id");      
   $("#comment_btn_div_"+post_id).show();
   event.stopPropagation();

   $('body').bind("click",function() {
        $("#comment_btn_div_"+post_id).hide()
        $(this).unbind();
   });
});

I hope it will work for you