Tengo este div de desplazamiento donde, si te desplazas, clonará las etiquetas li y las colocará al final para que tengas un desplazamiento infinito. Aquí está el código para eso:
infinite() { // it's a div, that holds your news // it holds ul with news in li elements const div = document.getElementById("container"); div.addEventListener("scroll", function () { const maxScroll = this.scrollHeight - this.clientHeight; const currentScroll = this.scrollTop; const bottom = 100; if (currentScroll + bottom >= maxScroll) { const ul = document.getElementsByTagName("ul")[0]; const current = parseInt(ul.dataset.current, 10); const li = document.querySelectorAll("li")[current]; const newLi = li.cloneNode(true); ul.appendChild(newLi); ul.dataset.current = current + 1; console.log(li); } }); },Esto funciona perfecto para mí. Sin embargo, después de crear el nodo, no puedo colocar el detector de eventos en los últimos li clonados porque no están en el DOM. ¿Cómo obligo al JS a colocar el detector de eventos en los nodos recién clonados? Aquí está la función para eso:
hover() { const rows = document.getElementsByClassName("plugin"); rows.forEach((row) => { row.addEventListener("mouseover", () => { row.style.opacity = 1; }); row.addEventListener("mouseout", () => { row.style.opacity = 0.3; }); }); },solo delegar
const ul = document.querySelector("#container ul"); ul.addEventListener("mouseover", e => { const tgt = e.target; if (tgt.tagName === "LI") tgt.style.opacity = 1; }) ul.addEventListener("mouseout", e => { const tgt = e.target; if (tgt.tagName === "LI") tgt.style.opacity = .3; });o simplemente usa CSS
#container li { opacity: .3 } #container li:hover { opacity: 1 }