繁体   English   中英

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

[英]jQuery - Hide show not working properly in Chrome (Works only once)

只需编写一个jQuery,以在单击文本区域时显示评论按钮。 隐藏评论按钮,单击屏幕上的其他位置。 在Firefox中工作正常。 但是在Chrome中,它只能运行一次。 当我再次单击textarea时,提交按钮未显示,但仍处于隐藏状态。

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

不知道为什么这在Chrome中不起作用。 我的页面上有很多表格。 所以我在单击主体时做了$(".comment_btn").hide() 为了显示特定的评论按钮,我使用此代码$("#comment_btn_div_"+post_id).show();

更新:

隐藏评论按钮后,即使我从Firebug控制台执行$(“#comment_btn_div_23232”)。show()。 它没有显示div。

更新2(测试警报):

$(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. 单击文本区域,得到警报a。 身体单击b。 点击了注释文本区域。 现在显示评论按钮
  2. 单击的身体警报a。 身体点击了。 现在“评论”按钮已隐藏
  3. 单击文本区域,得到警报a。 身体单击b。 点击了注释文本区域。 现在不显示评论按钮。

谢谢!

尝试模糊

$(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()
});

小提琴

我碰到这样每过一段时间。 还没有弄清楚为什么会这样。 它使我迷惑。 我通过使用“显示” div的其他方法之一来解决它。 最近,我更改了css display属性:

$(“#comment_btn_div _” + post_id).css('display','block');

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();
   });
});

我希望它对你有用

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM