mi código es:
var draggedElement = this.template.querySelector("[id='"+divId+"']"); var cln = draggedElement.cloneNode(true,true); cln.classList.add('completed'); cln.classList.add('box-height'); cln.id='clone-'+divId; event.target.appendChild(cln);Ahora, si quiero alertar a la identificación del objetivo del evento en el evento onclick, da un resultado vacío.
Tratando de usar así pero no funcionó.
const btn = this.template.querySelector("[id='clone-"+divId+"']"); btn.addEventListener('click', function(event){ console.log('Button Clicked'); console.log(event.target.id); });Alguien puede ayudarme porfavor? Gracias por adelantado.
Probablemente esté vinculando el controlador de eventos antes de que se cree el elemento arrastrado (que supongo que se hace en respuesta a una acción del usuario).
En lugar de jugar con los atributos de id , simplemente vincule el controlador de eventos en el momento en que agrega el elemento clonado al documento. En ese momento, tiene la referencia al elemento clonado, por lo que puede agregarle el detector de eventos.
Pequeña demostración simplificada:
var draggedElement = document.querySelector("#test"); var cln = draggedElement.cloneNode(true,true); cln.removeAttribute("id"); // Don't use `id` cln.textContent = "cloned " + cln.textContent; document.body.appendChild(cln); cln.addEventListener('click', function(event){ console.log('Cloned button Clicked'); }); <button id="test">test</button> Aunque recomendaría enfáticamente no usar atributos de id generados dinámicamente, si realmente necesita identificar elementos mediante tales atributos de id , entonces use la delegación de eventos:
setTimeout(function () { // In reality this would be some drag event handler var draggedElement = document.querySelector("#test"); var cln = draggedElement.cloneNode(true,true); cln.id = "cloned-" + cln.id; // Bad practice cln.textContent = "cloned " + cln.textContent; document.body.appendChild(cln); }, 500); // Event delegation document.body.addEventListener('click', function(event){ if (event.target.id = "cloned-test") { console.log('Cloned button Clicked'); } }); <button id="test">test</button>