Agregue el evento onclick al elemento recién agregado en JavaScript

Question

He intentado agregar el evento onclick a los nuevos elementos que agregué con JavaScript.

El problema es cuando reviso document.body.innerHTML Puedo ver que onclick = alert ('blah') se agrega al nuevo elemento.

Pero cuando hago clic en ese elemento, no veo que el cuadro de alerta esté funcionando. De hecho todo lo relacionado con JavaScript no está funcionando ..

aquí es lo que utilizo para agregar nuevo elemento:

function add_img() { 
    var elemm = document.createElement('rvml:image'); 
    elemm.src = 'blah.png'; 
    elemm.className = 'rvml'; 
    elemm.onclick = "alert('blah')"; 
    document.body.appendChild(elemm); 
    elemm.id = "gogo"; 
    elemm.style.position='absolute'; 
    elemm.style.width=55; 
    elemm.style.height=55; 
    elemm.style.top=200; 
    elemm.style.left=300; 
    elemm.style.rotation=200; 
} 

Así es como puedo llamar a esta función:

<button onclick=add_img()>add image</button> 

Ahora la imagen se dibuja perfectamente dentro del navegador. Pero cuando hago clic en la imagen, no recibo esa alerta.

Answer 1

.onclick debe establecerse en una función en lugar de una cadena. Pruebe

elemm.onclick = function() { alert('blah'); }; 

en su lugar.

Answer 2

No es seguro, pero intenta:

elemm.addEventListener('click', function(){ alert('blah');}, false); 

Answer 3

no se puede asignar un evento por la cadena. Use eso:

elemm.onclick = function() {alert ('blah'); };

Answer 4

Respuesta corta: desea configurar el controlador a una función:

elemm.onclick = function() { alert('blah'); }; 

Ligeramente respuesta más larga: usted tiene que escribir unas cuantas líneas de código para conseguir que funcione constantemente a través de los navegadores.

El hecho es que incluso el código ligeramente más largo que podría resolver ese problema en particular en un conjunto de navegadores comunes aún tendrá sus propios problemas. Entonces, si no te importa el soporte de varios navegadores, ve con el totalmente corto. Si te importa y solo quieres que funcione esta única cosa, ve con una combinación de addEventListener y attachEvent. Si desea poder crear objetos de forma extensa y agregar y eliminar detectores de eventos a lo largo de su código, y quiere que eso funcione en todos los navegadores, definitivamente desea delegar esa responsabilidad en una biblioteca como jQuery.

Answer 5

No creo que puedas hacer eso de esta manera. Deberá utilizar:

void addEventListener( 
    in DOMString type, 
    in EventListener listener, 
    in boolean useCapture 
); 

Documentación right here.

Answer 6

Tiene tres problemas diferentes. ¡Antes que nada, los valores en las etiquetas HTML deberían ser citados! No hacer esto puede confundir el navegador, y puede causar algunos problemas (aunque es probable que no sea el caso aquí). En segundo lugar, debe asignar una función a la variable onclick, como alguien más lo mencionó. No solo es esta la forma correcta de hacerlo en el futuro, sino que simplifica mucho las cosas si está intentando usar variables locales en la función onclick. Finalmente, puede probar addEventListener o jQuery, jQuery tiene la ventaja de una interfaz más agradable.

¡Oh, y asegúrese de que su HTML lo valide! Eso podría ser un problema.

Answer 7

En caso de que no desee escribir todo el código que ha escrito una vez en la función que llamó. Utilice el siguiente código, utilizando jQuery:

$ (elemento) .on ('clic', función() {add_img();});