Elemento aninhado não removerá a classe pai
-
19-09-2019 - |
Pergunta
A classe está definida em um <li>
Por ser clicado. Agora um elemento aninhado (<button>
) não removerá a classe de seus pais.
Desde já, obrigado.
$(document).ready(function() {
$('.pickOne li').click(function() {
$(this).addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});
E o HTML é assim:
<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>
Solução
Ok, aqui está o que está acontecendo:
Como o botão contido no LI, quando você clica no botão, ele remove a classe e o evento continua a propagar e reaplica a classe.
Portanto, está removendo; Isso apenas reaplicando instantaneamente. Então adicione
// Dont forget to put the e in function()
$('.settingsCancelBtn').click(function(e) {
$(this).parent().parent().removeClass('active');
// This is the new line!
e.stopPropagation();
});
Outras dicas
Então, minutos depois que eu postei isso, meu amigo apresenta uma solução. Pontos de quebra ... quem sabia. :)
Porque eu estava inicialmente selecionando o <li>
, quando cliquei em um filho para remover a classe ativa, ele a removeu e depois a adicionei imediatamente novamente.
A solução foi selecionar o <a>
dentro de <li>
inicialmente (está pronto para display:block
e abrange o mesmo espaço o li
faz.)
Bobo me.
$(document).ready(function() {
$('.pickOne li a ').click(function() {
$(this).parent().addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});