Вложенный элемент не удалит родительский класс - PullRequest
Новая
       14

Вложенный элемент не удалит родительский класс

1 голос
/ 07 января 2010

Класс устанавливается на <li> при нажатии на него. Теперь вложенный элемент (<button>) не удалит класс из его родителя.

Заранее спасибо. 

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

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

и HTML выглядит так: 

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

Ответы [ 2 ]

5 голосов
/ 07 января 2010

Хорошо, вот что происходит:

Поскольку ваша кнопка содержится в LI, при нажатии кнопки она удаляет класс, а затем событие продолжает распространяться и повторно применяет класс.

Так что это удаляет; это просто повторное применение мгновенно. Так что добавь 

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

    // This is the new line!
    e.stopPropagation();
  });
0 голосов
/ 07 января 2010

Итак, через несколько минут после того, как я опубликовал это, мой приятель представляет решение.Точки разрыва ... кто знал.:)

Поскольку я изначально выбирал <li>, когда я щелкнул дочерний элемент, чтобы удалить активный класс, он удалил его, а затем сразу же добавил его снова.

Решение состояло в том, чтобы изначально выбрать <a> внутри <li> (он установлен на display:block и занимает то же пространство, что и li.)

Глупый я.1012 * 

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

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