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

onclick attribute javascript

Question

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

El problema es cuando reviso document.body.innerHTML. De hecho, 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 funciona.

aquí es lo que uso para agregar un 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 llamo 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

En caso de que no quiera escribir todo el código que escribió una vez en la función que llamó. Utilice el siguiente código, usando jQuery:

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

Answer 2

No creo que puedas hacer eso de esta manera. Deberías usar :

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

Documentación aquí .

Answer 3

No estoy seguro, pero intenta:

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

Answer 4

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

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

Respuesta un poco más larga: deberá escribir algunas líneas más de código para que funcione de manera uniforme en todos los navegadores.

El hecho es que incluso el código ligeramente más largo que podría resolver ese problema en particular a través de 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

También puedes establecer el atributo:

elem.setAttribute("onclick","alert(''blah'');");

Answer 6

Tienes 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.

¡Ah, y asegúrate de que tu HTML valide! Eso podría ser un problema.

Answer 7

no puedes asignar un evento por cadena. Usa eso:

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

Answer 8

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

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

en lugar.