Вложенный элемент не удалит родительский класс
-
19-09-2019 - |
Вопрос
Класс установлен на <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>
Решение
Хорошо, вот что происходит:
Поскольку ваша кнопка содержится в 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();
});
Другие советы
Итак, через несколько минут после того, как я опубликовал это, мой приятель предлагает решение.Точки останова...кто бы знал.:)
Потому что я изначально выбирал <li>
, когда я нажал на его дочерний элемент, чтобы удалить активный класс, он удалил его, а затем сразу же добавил снова.
Решение состояло в том, чтобы выбрать <a>
внутри <li>
изначально (для него установлено значение display:block
и занимает то же пространство, что и li
делает.)
Глупый я.
$(document).ready(function() {
$('.pickOne li a ').click(function() {
$(this).parent().addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});