javascript - 单击一个按钮会取消 jQuery 中另一个(外部)按钮的单击事件

Question

我有一篇文章允许用户发表评论，但评论的 textarea 默认情况下处于隐藏状态，直到用户单击 Comment 按钮。评论文本区域有一个发送和取消按钮。 Cancel 按钮会隐藏 textarea，但在此之后，单击 Comment 按钮将不再起作用，直到您刷新页面。

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>

jQuery:

$('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_cancel_button按预期隐藏 comment_wrapper，但之后单击 Comment 不会 slideToggle 隐藏它。我得刷新一下。我该如何正确处理这个问题？

Answer 1

我认为您隐藏的元素与显示的元素不同。

您隐藏 .comment_body_wrapper 并显示 .comment_wrapper