Событие JQuery для замещенного класса

Question

Я пытаюсь создать кнопку Hide/Show с помощью jQuery. Когда кликнуто .cminus, ему нужно скрыть .arrowwrap и .commentbody и заменить его собственный класс на cplus. Затем, если нужно щелкнуть .cplus напротив, должно произойти.

Задача 1: В примере ниже после замены .cminus на .cplus, .cplus не запускает событие клика при его нажатии.

(EDIT проблема 2 вынесена в отдельный билет) Проблема 2: Я не доходя до .commentbody право скрыть/показать

Html:

<div class="commentline"> 
    <div class="carrowholder"> 
     <div class="cminus"></div> 
     <div class="arrowwrap"> 
     </div> 
    </div> 
    <div class="commentholder"> 
     <div class="commenttitle"> 
      Title 
     </div> 
     <div class="commentbody"> 
      Body 
     </div> 
    </div> 
</div> 

Jquery код:

$('.cminus').click(function(e) { 
    $(this).next('.arrowwrap').hide(); 
    $(this).parent().next('.commentholder .commentbody').hide(); 
    $(this).removeClass('cminus'); 
    $(this).addClass('cplus'); 
}) 

$('.cplus').click(function(e) { 
    alert("clicked cplus"); 
    $(this).next('.arrowwrap').show(); 
    $(this).addClass('cminus'); 
    $(this).removeClass('cplus'); 
}) 

Answer 1

Используйте .toggleClass('cminus'); и т. Д., А затем у вас есть один обработчик событий или используйте .on/.live на родительском элементе, чтобы разрешить делегированные события.

Что касается

$(this).parent().next('.commentholder .commentbody').hide(); 

Я думаю, что .commentholder является излишним, как вы указываете следующий который получает следующий родственный.

Answer 2

Если вы просто хотите, чтобы переключаться между режимами отображения и скрытия я предлагаю использовать .toggle («») showorhide

Я создал основную скрипку для вас попробовать.

http://jsfiddle.net/LsWuR/2/

Надеется, что это помогает.