error al llamar eventos con un elemento creado dentro de innerhtml

youangelazul · #1 (**permalink**) 03/02/2013, 00:30

Hola amigos bueno sere breve mi problema es este tengo un HTML

Código HTML:

 <div class="container_text_css" id="container_text">
     Hola mundo como estas lalalaa...
  </div>
<input type="submit" name="btnActu" id="btnActualizar" value="Enviar" onclick="javascript: actualizacion();">

y luego con un JAVASCRIPT:

Código:

 
function actualizacion(){
r = document.getElementById('container_text');
r.innerHTML = "<div id="contenedor_img"><img id="mi_imagen" src="un_url.com"/></div>";
}

var x = document.getElementById("contenedor_img").onclick = evento;
		
function evento()
{
 alert('hisistes un click');
}

bueno se supone que luego de haber creado dinamicamente mi IMAGEN con el innerhtml me deveria cojer ya se con JAVASCRIPT o JQUERY los eventos que sufran tanto el DIV (contenedor_img) y la IMG (mi_imagen) pero ai esta el problema mio que cuando intento capturar eventos o algo por el estilo no me reconoce...

pero no crean que vine aqi a solo qe me den la solucion estuve investigando y entendí algo de que innerhtml envia una cadena string osea que es de esa manera en como lo maneja por ende es que el DOM no lo reconoce...

por otro lado haciendo intentos logre que se me produjera la captura de el evento click pero es frustante la forma en como lo consegui y es asii...

Código:

r.innerHTML = "<div id="contenedor_img"><img id="mi_imagen" src="un_url.com" onclick="javascript: evento();"/></div>";

como veras tengo que darle el evento al momento de dar la estructura del elemento y esto es muy tedioso para el mantenimiento de codigo iio lo quiero manejar por separado... un lado HTML y al otro lado JAVASCRIPT siendo una forma mas limpia de como programar espero ustedes amigos expertos me puedan abrir la mente ante esta tremenda confusion graciias!

Desde iia graciias a todos los que me colaboren... YouAnGelAzul

Panino5001 · #2 (**permalink**) 03/02/2013, 01:34

1-La asignación del evento debe hacerse dentro de la función de actualización:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function actualizacion(){
    r = document.getElementById('container_text');
    r.innerHTML = '<div id="contenedor_img"><img id="mi_imagen" src="http://static.forosdelweb.com/customavatars/avatar471273_2.gif"/></div>';
    var x = document.getElementById("contenedor_img").onclick = evento;
}        
function evento()
{
 alert('hiciste un click');
}
</script>
</head>
<body>
<div class="container_text_css" id="container_text">
     Hola mundo lalalaa...
  </div>
<input type="submit" name="btnActu" id="btnActualizar" value="Enviar" onclick="actualizacion();"> 
</body>
</html>

2-no deberías usar el protocolo javascript: sin un sentido concreto.
3-escribe correctamente (¿qué es eso de "hisistes un click"?)