0

He encontrado miles de veces la solución a alguna duda en mi etapa de aprendizaje en esta gran comunidad y su hermana en inglés, pero, esta vez estoy perdido.

Pongo un caso simple, ya que mi código es bastante más complejo.

Quiero insertar un item a una lista de forma dinámica a través de insertAdjacentHTML() cuando la ventana tiene ciertas dimensiones.

Una vez agregado, hago un listener a traves de su clase y para ejemplo llamo a un alert(). Hasta aquí funciona perfecto, pero la cuestión es que también he implementado la misma función de agregar el item, pero cuando la ventana se redimensiona (window.onresize) y a pesar de usar la misma función, si bien se inserta el item, no lo reconoce el evento click, o sea, si reconoce el href, pero no reconoce ni la clase ni el id.

Dejo el ejemplo:

<ul>
  <li><a href="#" class="general" id="item1">ITEM 1</a></li>
  <li><a href="#" class="general" id="item2">ITEM 2</a></li>
</ul>

<script>
  window.onresize = redimensiona;
  let agregado = false;
  if (window.innerWidth < 787 && agregado == false) {
    agrega();
  }

  function redimensiona() {
    if (window.innerWidth < 787 && agregado == false) {
      agrega();
    }
  }

  function agrega() {
    let referencia = document.getElementById("item2");
    referencia.insertAdjacentHTML('afterend', '<li><a href="#" class="general" id="item3">ITEM 3</a></li> ');
    agregado = true;
  }
  $(".general").click(function() {
    alert();
    console.log(this.id);
  });
</script>
1
  • 1
    No lo reconoce porque el elemento todavía no existe cuando asignas el evento; debes delegarlo. Revisa esta respuesta
    – Triby
    Commented el 4 feb. 2021 a las 18:44

1 respuesta 1

1

Me fije lo de la delegacion y solo cambiando:

$(".general").click(function() {
alert();
console.log(this.id);

});

por:

$(document).on("click",".general", function () {
    console.log(this.id);
  });

se soluciono

1
  • 1
    Exacto, porque con el primero, se asigna el evento solo a los elementos que YA EXISTEN y no toma en cuenta los que agregas posteriormente. Con el segundo, cada que se hace un clic en el documento, se analiza si el elemento tiene la clase especificada para ejecutar la función, entonces no importa si ya existía al momento de asignar el evento o se agregó después.
    – Triby
    Commented el 4 feb. 2021 a las 20:03

Tu Respuesta

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

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