【问题标题】:jQuery - Hide show not working properly in Chrome (Works only once)jQuery - 隐藏显示在 Chrome 中无法正常工作(仅工作一次)
【发布时间】:2013-06-24 09:49:46
【问题描述】:

刚刚写了一个jquery来显示一个评论按钮,当点击textarea时。隐藏评论按钮点击屏幕上的其他地方。 它在 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();

更新:

隐藏评论按钮后,即使我从萤火虫控制台执行 $("#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.评论文本区域单击。现在评论按钮不显示

谢谢!

【问题讨论】:

  • div "comment_btn_div_48774" 是你身体的一部分。
  • 是的,是身体的一部分
  • 对我来说很好。你有任何错误吗?
  • 不,我没有收到任何错误。请注意,我的页面中有很多表格。所以我做了 $(".comment_btn").hide()。为了使用此代码显示特定的评论按钮 $("#comment_btn_div_"+post_id).show();
  • 为什么你将你的点击事件与“.comment_btn”绑定,也作为它的一部分。

标签: javascript jquery google-chrome show-hide


【解决方案1】:

用模糊试试

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

【讨论】:

  • $('.comment_txt').blur(function () { alert(1); });模糊在 Chrome 中不起作用。我没有收到此代码的警报。显示()正在工作。这是我的 Chrome 版本 23.0.1271.97。使用 Ubuntu。
【解决方案2】:

我每隔一段时间就会遇到这种情况。还没有弄清楚为什么会这样;它让我感到困惑。我通过使用“显示” div 的其他方式之一来解决它。最近,我更改了 css 显示属性:

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

【讨论】:

    【解决方案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();
       });
    });
    

    希望对你有用

    【讨论】:

    • 抱歉,这段代码在 Firefox 中运行良好。但它在 Chrome 中仍然相同。第一次工作。第二次没有显示评论按钮。
    • 我已经更新了代码,请您检查一下。我不确定您的页面结构。因为我认为其他事情会阻碍它。在 js 中,代码工作正常。
    • 请您通过在 textarea 点击和正文点击中添加警报来检查。点击是否有效。通话是否会发生。
    • 用示例更新了我的问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-22
    • 1970-01-01
    • 2015-02-27
    • 2022-01-06
    • 2020-06-06
    • 1970-01-01
    相关资源
    最近更新 更多