DIV parent parentable pour montrer et cacher les enfants DIV a des problèmes dans jQuery

Question

C'est un peu fou et je ne suis pas sûr de ce qui ne va pas. Je veux faire un DIV cliquable pour montrer/cacher les enfants divs. Mais une fois que je fais une cachette d'un enfant, je ne peux pas le cacher.

Voici l'intégralité de mon code. Toute aide appréciée. Dans l'exemple ci-dessous, je ne peux pas afficher inner1 lorsque je clique sur le bouton Annuler.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> 

<div class="wrapper"> 
    <div class="inner1"> 
    1 
    </div> 

    <div class="inner2" style='display:none'> 
    2 <input type='button' value='cancel' class='cancel'> 
    </div> 

</div> 


<style> 
div {border:1px solid red;} 
</style> 

<script> 
$(document).ready(function() { 
     $('.wrapper').live("click", function(){ 
      $('.inner1').hide(); 
      $('.inner2').show(); 
     }); 


     $('.cancel').live("click", function(){ 
      $('.inner1').show(); 
      $('.inner2').hide(); 
     }); 
}); 
</script> 

Answer 1

Vous devez arrêter le click sur .cancel de bouillonnement et également être un clic sur .wrapper en utilisant .stopPropagation(), comme ceci:

$('.cancel').live("click", function(e){ 
    $('.inner1').show(); 
    $('.inner2').hide(); 
    e.stopPropagation(); 
}); 

You can test it out here. Qu'est-ce qui se passe actuellement, vous sont le cacher, mais le gestionnaire de clic .wrapper obtient le clic et affiche immédiatement .inner2 à nouveau.