點擊一個按鈕取消jQuery中的另一個（外部）按鈕的點擊事件

Question

我有一個帖子，允許用戶評論，但評論的textarea默認情況下是隱藏的，直到用戶點擊Comment按鈕。評論textarea有一個 Send和Cancel按鈕。 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' :)

http://jsfiddle.net/TrueBlueAussie/mjqs6ces/1/

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


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

注意：您可以縮短2個認定爲一個選擇.find('.comment_body_wrapper .comment_wrapper')

Answer 2

我似乎是你hidding不同的元素比你展現的

您hidding .comment_body_wrapper和顯示.comment_wrapper

Answer 3

的問題是，有評論按鈕，您切換元素與.comment_wrapper類，但在取消按鈕你hidding用不同類comment_body_wrapper的元素。

然後你隱藏.comment_wrapper，並嘗試切換.comment_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(); 
})