Javascript 单击一个按钮取消jQuery中另一个（外部）按钮的单击事件

我有一篇帖子，允许用户发表评论，但在用户点击

comment

按钮之前，评论的

textarea

默认是隐藏的。注释文本区域有一个

发送

和

取消

按钮。

取消

按钮隐藏了

文本区域

，但在此之后，单击

注释

按钮在刷新页面之前不会再次工作

HTML：

<div class='post'>
    <div class='p_body'>
        <div class = 'comment_body_wrapper'>
            <div class = 'comment_wrapper'>
                <textarea class="comment_content" rows = '2' maxlength="480" name="comment_content" placeholder="Your thoughts on this..."></textarea>
                <div class = 'comment_buttons_wrapper'>
                    <div class='comment_buttons'>
                        <button class="submit_comment btn" type="submit">Send</button>
                        <button class="comment_cancel_button btn" type="submit">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <div class = 'post_footer'>
            <button class='btn post_comment' value = '1'>Comment </button>
        </div>
    </div>
</div>

$('body').on('click', '.post_comment', function(){
    var $this = $(this);
    var $comment=$this.closest('.post').find('.comment_body_wrapper').find('.comment_wrapper');
    $comment.slideToggle(); 
    $comment.find('.comment_content').focus();
})

$('body').on('click', '.comment_cancel_button', function(){
    var $this = $(this);
    $this.closest('.comment_body_wrapper').hide();
})

如果我点击

Comment

按钮，它肯定会切换（显示或隐藏），但点击

Cancel

会删除此事件。

comment\u cancel\u按钮

---

按预期隐藏

comment\u包装

，但之后单击

comment

不会

滑动切换它。我得刷新一下。如何正确处理此问题？
您正在隐藏
。注释\u body\u wrapper'
，但显示其子项
。注释\u wrapper'
：）


注意：您可以将两个查找缩短为一个选择器
.find（'.comment\u body\u wrapper.comment\u wrapper'）
您正在隐藏的
'.comment\u body\u wrapper'
，但显示其子项
。
：）


注意：您可以将两个查找缩短为一个选择器
.find（'.comment\u body\u wrapper.comment\u wrapper'）
我觉得您隐藏的元素与显示的元素不同

你隐藏了
.comment\u body\u wrapper
并显示了
.comment\u wrapper
我觉得你隐藏的元素与显示的元素不同

您隐藏
.comment\u body\u wrapper
并显示
.comment\u wrapper
问题在于，使用comment按钮，您将一个元素与类
切换。comment\u wrapper
，但在Cancel按钮中，您隐藏了一个具有不同类
comment\u body\u wrapper
的元素

然后隐藏
.comment\u wrapper
，并尝试切换
。comment\u wrapper
是另一个元素，因此不起作用

在这两种情况下必须使用同一个类，然后它才能工作

    $('body').on('click', '.post_comment', function(){
    var $this = $(this);
    var $comment=$this.closest('.post').find('.comment_body_wrapper');
    $comment.slideToggle(); 
    $comment.find('.comment_content').focus();
})

$('body').on('click', '.comment_cancel_button', function(){
    var $this = $(this);
    $this.closest('.comment_body_wrapper').hide();
})

问题是，使用“注释”按钮时，您正在使用类
.Comment\u wrapper
切换元素，但在“取消”按钮中，您正在隐藏具有不同类
Comment\u body\u wrapper
的元素

然后隐藏
.comment\u wrapper
，并尝试切换
。comment\u wrapper
是另一个元素，因此不起作用

在这两种情况下必须使用同一个类，然后它才能工作

    $('body').on('click', '.post_comment', function(){
    var $this = $(this);
    var $comment=$this.closest('.post').find('.comment_body_wrapper');
    $comment.slideToggle(); 
    $comment.find('.comment_content').focus();
})

$('body').on('click', '.comment_cancel_button', function(){
    var $this = $(this);
    $this.closest('.comment_body_wrapper').hide();
})

只是旁注。如果没有更接近变化元素的内容，请优先使用
文档
，而不是
正文
<代码>'body'
有与样式相关的错误（导致单击事件不触发）好的，你的意思是
$（文档）。准备就绪（function（）{….}）
还不够吗？这并没有解决我的问题。不，我不是说文件准备好了。。。基本上你隐藏一件事，然后让它的孩子看。。。回答如下。只是一个旁注。如果没有更接近变化元素的内容，请优先使用
文档
，而不是
正文
<代码>'body'

有与样式相关的错误（导致单击事件不触发）好的，你的意思是

$（文档）。准备就绪（function（）{….}）

还不够吗？这并没有解决我的问题。不，我不是说文件准备好了。。。基本上你隐藏一件事，然后让它的孩子看。。。下面的答案。这与现有答案有什么不同？在再次发布相同的内容之前，最好先阅读其他答案。这与现有答案有什么不同？最好在再次发布相同内容之前阅读其他答案。我不知道这一点，但它有效，谁不想要一个

Pythonic

code？。我不知道这一点，但它有效，谁不想要

Pythonic

code？。