En mi proyecto necesito crear un botón dinámicamente. Lo envuelvo a div y este div se agrega al contenedor llamado tableDoc. Mi problema es que en este caso la función onclick no funciona.
Si mi botón se agrega directamente a tableDoc sin estar ajustado a div antes de que funcione bien.
¿Podría decirme por qué la función onclick no funciona si se ajusta a div?
Ejemplo con botón envuelto en div antes de agregarse a tableDoc:
Elements.map(item=>{ const div=document.createElement('div'); ///////adding button//////////////// var deleteButton = document.createElement("button"); deleteButton.setAttribute('type','button'); deleteButton.setAttribute('class',"btn-close"); deleteButton.setAttribute('aria-label','Close'); deleteButton.setAttribute('id',item.pk); deleteButton.onclick = function() { alert("blabla"); }; ////////////////////////////////////////////////////// div.innerHTML+=item.fields.car+' '+item.fields.model div.appendChild(deleteButton); tableDoc.appendChild(div); div.innerHTML+='<br>' })ejemplo secundario con botón agregado directamente a tableDoc:
Elements.map(item=>{ const div=document.createElement('div'); ///////adding button//////////////// var deleteButton = document.createElement("button"); deleteButton.setAttribute('type','button'); deleteButton.setAttribute('class',"btn-close"); deleteButton.setAttribute('aria-label','Close'); deleteButton.setAttribute('id',item.pk); deleteButton.onclick = function() { alert("blabla"); }; ////////////////////////////////////////////////////// div.innerHTML+=item.fields.car+' '+item.fields.model tableDoc.appendChild(deleteButton); tableDoc.appendChild(div); div.innerHTML+='<br>' })Quita el detector de eventos usando div.innerHTML+='<br>' .
En el siguiente ejemplo, estoy creando 2 botones y los agrego a 2 divs. La única diferencia aquí es que luego uso innerHTML en uno de los divs, lo que hace que el botón pierda su detector de eventos.
Esto se debe a que innerHTML es una función basada en texto y no incluye detectores de eventos. Opera solo en la representación de cadena del nodo.
const fooButton = document.createElement('button') fooButton.onclick = () => console.log("foo") fooButton.textContent = "foo" document.getElementById("foo").append(fooButton) const barButton = document.createElement('button') barButton.onclick = () => console.log("bar") barButton.textContent = "bar" document.getElementById("bar").append(barButton) document.getElementById("bar").innerHTML += '<br>' <div id="foo"></div> <div id="bar"></div>