javascript - Clicking on One Button Cancels a Click Event of Another (Outer) Button in jQuery -

javascript - Clicking on One Button Cancels a Click Event of Another (Outer) Button in jQuery -

i have post allows users comment comment's textarea hidden default until user clicks on comment button. comment textarea has send , cancel buttons. cancel button hides textarea after that, clicking on comment button doesn't work 1 time again until refresh page.

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

if click on comment button sure toggles (display or hide) clicking on cancel removes event. comment_cancel_button hides comment_wrapper expected after clicking on comment doesn't slidetoggles it. have refresh. how handle right way?

you hiding '.comment_body_wrapper', showing kid '.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(); });

note: can shorten 2 finds 1 selector .find('.comment_body_wrapper .comment_wrapper')

javascript jquery