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>