elemento nidificato non rimuoverà classe genitore

Question

La classe è impostato su un <li> da essa essere cliccato. Ora un elemento nidificato (<button>) non rimuoverà la classe dal suo genitore.

Grazie in anticipo.

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

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

ed il codice HTML è in questo modo:

<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

D'accordo, ecco cosa sta succedendo:

A causa pulsante nel contenuto nella LI, quando si fa clic sul pulsante, si rimuove la classe, e quindi l'evento continua a propagarsi e riapplica la classe.

Così è la rimozione; il suo solo riapplicare immediatamente. Quindi aggiungere

  // 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

Quindi, pochi minuti dopo che ho postato questo, il mio amico presenta una soluzione. Break Points ... che conoscevano. :)

Perché ero inizialmente selezionando il <li>, quando ho cliccato su un bambino di esso per rimuovere la classe di attivo, rimosso, e poi subito aggiunto di nuovo.

La soluzione era di selezionare la <a> all'interno <li> inizialmente (è impostato display:block e copre lo stesso spazio della li fa.)

Sciocco me.

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

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