0

No puedo acceder al padre de un elemento generado dinámicamente con jquery:

$("#test").prepend("<div class='clickame'>Hola</div>");

$(document).on("click",".clickame",function(){ 

$(this).parents("div").toggleClass("active");
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

pero no me agrega el class active al padre.

3
  • 1
    ¿Cuál es exactamente el problema? Si declaras por ejemplo .active{ color: red;} en tu css y le das click al elemento con clickame te agrega la clase bien. el 2 abr. 2022 a las 17:03
  • Tal como dice @JaimeMenéndez tu código de esta pregunta funciona bien. Sí que se agrega/elimna la clase active sobre el padre cada vez que se pulsa sobre el texto Hola. Lo único que se me ocurre es que no te des cuenta porque el active no tenga ningún efecto visual en la página donde lo estas haciendo, pero si miras el código fuente pulsando el botón derecho sobre el texto Hola y seleccionando Inspeccionar en tu navegador, y lo haces varias veces verás como se agrega o elimina esa clase sobre el padre en la ventana del inspector.
    – masterguru
    el 2 abr. 2022 a las 17:36
  • es bastante extraño porque yo lo hago en mi proyecto y no funciona, voy a editar la pregunta con mi codigo real el 2 abr. 2022 a las 18:24

1 respuesta 1

1

Es posible que te falte definir el atributo class en el div padre.

No sé tu estructura padre e hijos pero esto es a modo de prueba que así funciona.

Editado: Es lo mismo, esté donde esté la clase clickame, o venga del script o sea estático, siempre y cuándo dentro del padre, funcionará igual. Por lo menos a mí y aquí funciona bien (Debes ver si no hay algún conflicto o llaves sin cerrar o algo en jQuery).

$("#test").prepend("<div class='clickame'>Hola</div>");

$("#test").on("click",".clickame",function(){
 
 $(this).parents("div").toggleClass("active");

});
.padre {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 300px;
}

.padre.active {
 background-color: red;
}
<div id="test" class="padre">

  <div id="test" class="hola ">
 
    <!-- <button class="clickame">clickame</button>-->
 
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • aca no estas creando un elemento dinamico solo estas trabajando sobre elementos estaticos es decir que ya existian en el DOM, a lo que yo me refiero es a acceder al padre de un elemento creado con jquery el 2 abr. 2022 a las 18:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.