L'élément imbriqué ne supprime pas la classe parent

Question

La classe est définie sur <li> en cliquant dessus. Maintenant, un élément imbriqué (<button>) ne supprimera pas la classe de son parent.

Merci d'avance.

$(document).ready(function() { 
     $('.pickOne li').click(function() { 
     $(this).addClass('active'); 
     }); 

     $('.settingsCancelBtn').click(function() { 
     $(this).parent().parent().removeClass('active'); 
     }); 
    }); 

et le code HTML est comme ceci:

<div class="fromCamp pickOne four"> 
       <ul class="four"> 
        <li class="first bus"><a href="#" alt="By Bus"></a> 
         <div> 
          <p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
        <li class="second car"><a href="#" alt="By Car"></a> 
         <div> 
          <p><a href="#">Remoras</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
        <li class="third plane"><a href="#" alt="By Plane"></a> 
         <div> 
          <p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
        <li class="fourth stayOver"><a href="#" alt="Staying Over"></a> 
         <div> 
          <p><a href="#">Remoras</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
       </ul> 
      </div> 
      <div class="cmClear"></div> 
     </div> 

Answer 1

Ok, voici ce qui se passe:

Parce que votre bouton contenu dans la LI, lorsque vous cliquez sur le bouton, il supprime la classe, puis l'événement continue de se propager et réapplique la classe.

Il est donc retiré; C'est juste de réappliquer instantanément. Alors ajoutez

// Dont forget to put the e in function() 
    $('.settingsCancelBtn').click(function(e) { 
    $(this).parent().parent().removeClass('active'); 

    // This is the new line! 
    e.stopPropagation(); 
    }); 

Answer 2

Ainsi, quelques minutes après que j'ai posté cela, mon copain présente une solution. Points de rupture ... qui savait. :)

Parce que je sélectionnais initialement le <li>, lorsque j'ai cliqué sur un enfant de celui-ci pour supprimer la classe active, il l'a supprimé, puis l'a immédiatement ajouté à nouveau.

La solution est de choisir la <a> à l'intérieur du <li> initialement (il est réglé sur display:block et couvre le même espace le li fait.)

me Silly.

$(document).ready(function() { 
     $('.pickOne li a ').click(function() { 
     $(this).parent().addClass('active'); 
     }); 

     $('.settingsCancelBtn').click(function() { 
     $(this).parent().parent().removeClass('active'); 
     }); 
    });