Estoy mostrando una lista de elementos div que se generaron a partir de la función .html cada vez que los usuarios hacen clic en un botón. El código se ve a continuación
formación
const obj = [{"id":"1","section":"delivery","label":"Self-Pick up"},{"id":"2","section":"delivery","label":"Delivery"}]javascript
createFilterBubblesTemplate = (obj) => { let bubbles = '' obj.forEach(e => { bubbles += `<div class="filter-btn"> <span>${e.label}</span> <span class="icon-xmark" id="bubbles-close" data-filter-id="${e.id}" data-filter-section="${e.section}"></span> </div>` }) $("#filtered-items").html(bubbles); }elemento html después de generado por la función createFilterBubblesTemplate
<div class="filter-items" id="filtered-items"> <div class="filter-btn"> <span>Self-Pick up</span> <span class="icon-xmark" id="bubbles-close" data-filter-id="1" data-filter-section="delivery"></span> </div><div class="filter-btn"> <span>Delivery</span> <span class="icon-xmark" id="bubbles-close" data-filter-id="2" data-filter-section="delivery"></span> </div> </div>Pero cuando traté de adjuntar, haga clic en eventlistener en el intervalo con class="icon-xmark", parece que no funciona. Necesito ayuda para resolver este problema
document.querySelectorAll('.icon-xmark').forEach(item => { item.addEventListener('click', (event) => { console.log(event) }) })tal vez adjunte el evento ANTES de agregar el elemento al DOM. Intenta delegar el evento
document.addEventListener('click', (event) => { const target = event.target; if (target.classList.contains('icon-xmark')) { console.log(event); } });pero es mejor usar el atributo de fecha
<span class="icon-xmark" data-close id="bubbles-close" data-filter-id="2" data-filter-section="delivery"></span> ... document.addEventListener('click', (event) => { const target = event.target; if ('close' in target.dataset) { console.log(event); } });El problema se soluciona usando la respuesta de Arm144. Adjuntar el atributo onclick en el lapso
createFilterBubblesTemplate = async (obj) => { let bubbles = '' obj.forEach(e => { bubbles += `<div class="filter-btn"> <span>${e.label}</span> <span class="icon-xmark" onclick="closeFiltersBubbles(${e.id},'${e.section}')" data-filter-id="${e.id}" data-filter-section="${e.section}"></span> </div>` }) $("#filtered-items").html(bubbles); }Los intervalos a los que asigna el controlador de clics están vacíos, por lo que se representan con un ancho de 0 y no puede hacer clic en ellos.
Lo siguiente corrige esto agregando contenido (espacios que no se rompen).
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="expires" content="0"> <meta http-equiv="cache-control" content="private"> <meta http-equiv="pragma" content="no-cache"> <title>SO - Bitmap (svg)</title> <!-- --> <style type="text/css"> body { background-color: #eee; } .icon-xmark { background-color: lime; cursor: pointer; } </style> <script> const obj = [{"id":"1","section":"delivery","label":"Self-Pick up"},{"id":"2","section":"delivery","label":"Delivery"}]; let createFilterBubblesTemplate = (obj) => { let bubbles = ''; obj.forEach(e => { bubbles += `<div class="filter-btn"> <span>${e.label}</span> <span class="icon-xmark" id="bubbles-close" data-filter-id="${e.id}" data-filter-section="${e.section}"> </span> </div>`; }); document.querySelector("#filtered-items").innerHTML = bubbles; }; // createFilterBubblesTemplate document.addEventListener('DOMContentLoaded', () => { setTimeout ( () => { createFilterBubblesTemplate(obj); setTimeout ( () => { document.querySelectorAll('.icon-xmark').forEach(item => { item.addEventListener('click', (event) => { console.log('Here we go...'); }); }); } , 1000 ); } , 1000 ); }); </script> </head> <body> <div class="filter-items" id="filtered-items"></div> </body> </html>