elemento anidado no eliminará clase padre
-
19-09-2019 - |
Pregunta
La clase se encuentra en una <li>
por lo que se ha hecho clic. Ahora, un elemento anidado (<button>
) no eliminará la clase de la que es padre.
Gracias de antemano.
$(document).ready(function() {
$('.pickOne li').click(function() {
$(this).addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});
y el código HTML es así:
<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>
Solución
Está bien, esto es lo que está pasando:
Debido a que el botón dentro contenida en el LI, al hacer clic en el botón, se elimina la clase, y luego el evento continúa propagándose y vuelve a aplicar la clase.
Por lo tanto, es la eliminación; es sólo volver a aplicar al instante. Así que añadir
// Dont forget to put the e in function()
$('.settingsCancelBtn').click(function(e) {
$(this).parent().parent().removeClass('active');
// This is the new line!
e.stopPropagation();
});
Otros consejos
Así que, minutos después de que publiqué esto, mi amigo se presenta una solución. Romper los puntos ... que sabían. :)
Debido a que estaba seleccionando inicialmente el <li>
, cuando hace clic en un niño de la misma para eliminar la clase activa, se quitó, y luego inmediatamente añadido de nuevo.
La solución fue seleccionar la <a>
dentro de la <li>
inicialmente (se establece en display:block
y cubre el mismo espacio la li
hace.)
Me tonto.
$(document).ready(function() {
$('.pickOne li a ').click(function() {
$(this).parent().addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});