Eventos Javascript al añadir un nuevo nodo al documento

[Zokor]

Hola! tengo un problemilla que no sé resolver.

En una determinada función javascript, creo un nodo con el DOM de esta manera:

img = document.createElement ('img');
img.setAttribute('src', '../../entorno/recursos/imagenes/aspa.gif');
img.setAttribute('align', 'absmiddle');
img.setAttribute('onClick', "alert('holaa')");
obj_TD.appendChild (img);

Como veis creo una imagen, y luego la añado a una fila. Esa imagen tiene un evento onClick que simplemente me ejecuta un alert. Pues no hay manera de que funcione el evento. Es extraño, porque si ejecuto un alert(obj_TD.innerHTML); puedo comprobar que efectivamente el evento onClick ha sido añadido a la imagen, aunque no sé porque no se ejecuta.

Muchas gracias anticipadas
Saludos!

[JavierB]

Hola, Zokor.

Se me ocurre que puedes cambiar:

img.setAttribute('onClick', "alert('holaa')");

por:

im.onclick=alerta;

y luegos haces una función para que salga el mensaje:

function alerta() {alert('Hola')}

Espero que te sirva. Saludos,

[Zokor]

Pues sí, ahora sí que funciona con eso.
Muchas gracias JavierB!!

Saludos!

[Zokor]

Ahora me surge otra cosa. ¿Es posible pasarle parámetros a la función?

[caricatos]

Hola Zokor (y JavierB) :

Acabo de hacer unas pruebas en mozilla y explorer y esto funciona:

Código PHP:

      unaImagen.setAttribute("id", "unId"); 
    img.onclick = function()    { 
        alert(this.id); 
    }  
   

Es cuestión de ponerle atributos "incluso inventados" en el elemento creado y en la función creada tal como se ve más arriba manipular esos atributos anteponiendo "this."

Una curiosidad: Hice una prueba con un atributo "x" y mozilla devuelve la coordenada x del elemento...

Saludos

[tunait]

oño... buen truco, caricatos

[Zokor]

Eso me servirá.
Gracias a todos!
Salu2!

[caricatos]

Hola otra vez:

Es evidente que se dieron cuenta del error...

... Es que las pruebas las hice con una página que tenía de antes y la nueva imagen estaba declarada con "unaImagen", y al copiar el código solo cambie la linea de la función y no la asignación del id que tendría que ser:

img.setAttribute("id", "unId");
o simplemente:
img.id = "unId";

Saludetes

[JavierB]

"tre bian" caricatos Ya me lo he apuntado en mis chuletas de DHTML.

Saludos,

[RicardoG]

Hola: soy nuevo en el foro y desde antes de escribirme ustedes ya me han ayudado bastante:

El tema que estan tratando en este momento lo estoy incorporando a un codigo que tengo: asi:

function alerta(nombre,sn,depende){
obj=document.getElementById(nombre);
obj.style.visibility = "visible";
myTable = document.createElement("TABLE");
myTable.id = "TableOne";
myTable.border = "1";
myTableBody = document.createElement("TBODY");
for (var q=grupo1.length; q>=0; q--){
if (depende1[q]==depende){
textVal = contenido1[q];
row = document.createElement("TR");
cell = document.createElement("TD");
cell.setAttribute("WIDTH","50");
cell.setAttribute("HEIGHT","50");

// aqui esta el problema (1)
cell.onclick="alerta('itMenu1',1,textVal); return false;"


// asi tampoco funciona (2)
cell.setAttribute('onclick','alerta('itmenu1',1,te xtval)');


textNode = document.createTextNode(textVal);
cell.appendChild(textNode);
row.appendChild(cell);
myTableBody.appendChild(row);
}
myTable.appendChild(myTableBody);
obj.appendChild(myTable);
}
como pueden ver esta funcion crea una tabla con varias filas, a cada "td" le asigno unas propiedades, quiero agregar un onClick por cada td de modo que cuando pique me ejecute otra vez los datos, si utilizo el onClick con una funcion sin parametros funciona perfecto en (1), pero apenas le paso parametros parece ejecturse desde el momento que estoy contruyendola, o no funciona.

Por favor necesito su ayuda, se me agota el tiempo

Gracias

[tunait]

Hola RicardoG, bienvenido a los foros

prueba así


cell.onclick=function(){alerta('itMenu1',1,textVal ); return false;}

[RicardoG]

Eso era tunait, pero por que de esa forma, podría explicarmelo?

Buena,lo dicho llega al sitio.

Ricardo

[RicardoG]

Definitivamente hay cuestiones de JavaScript que no acabare de entender:
me surge otro error en la siguiente parte


for (l=3;l>=nivel;l--)
{
lvtabla=celdas(l);
hijouno=document.getElementById(lvtabla);
alert();
if (hijouno)
{
obj.removeChild(hijouno);
}
}

Si dejo el código con el alert() esta vaina funciona perfecto, si le quito el alert me comienza a generar un error de argumento no válido, es mu jarto para el usuario confirmar el alert, además de no mostrarme la tabla tal como la estoy en generando (fisicamente).

me podrían ayudar.

Muchisimas gracias.

RicardoG

[RicardoG]

Bueno el error es esta parte:

obj.removeChild(hijouno);


Gracias:

[abuenog]

Hola,
el código que utilizas Caricatos:

img.setAttribute("id", "unId");
o simplemente:
img.id = "unId";

no funciona si te inventas un atributo en firefox. Probé con esto y me devuelve null.

<button id="te">test</button>
<script>
document.getElementById("te").setAttribute("iid", "unId");
document.getElementById("te").onclick = function()
{
alert(this.iid);
}
</script>


Llevo tiempo buscando una solución para esto y no hay manera...

Saludos

[caricatos]

Hola a todos:

La verdad es que el mensaje es un poco viejo, y no me acuerdo como salió... pero trataremos de mejorar...

Si el atributo es inventado setAttribute es lo más fiable, y si los atributos son "normales" como el id o el className se puede poner directamente:
obj.id = "unId"; es algo que funciona bien en los navegadores modernos (al menos en los que lo he probado)...
Pero con esos atributos inventados, se debe leer con getAttribute()...

abuenog: prueba:

alert(this.getAttribute("iid"));

Otra cosa que no se implementa tan fácilmente en mozilla, es la asignación de funciones a los eventos...

Para eso existe en Mozilla addEventListener()

Ahora no tengo información a mano, pero si te interesa te busco el enlace.

Saludos

[RicardoG]

Bueno ya encontre la solución al mensaje del dia de ayer, básicamente era que estaba perdiendo el foco.

Estoy trabajando con varias capas, en cada capa le agrego una tabla, las tablas contienen las opciones que estoy trayendo de una tabla em postgretSql, en conclusión es un menu y aqui tienen el codigo de la función prinicpal por si les ayuda en algo.

function despMenu(nombre,sn,depende,nivel,newobj)
{
var gvNivel;
var gvDepende;
var gvTipo;
var gvLink;

obj=document.getElementById(nombre);
if (sn>0)
{

grupoArr=Fgrupos(nivel);
contenidoArr=Fcontenido(nivel);
dependeArr=Fdepende(nivel);
nivelArr=Fnivel(nivel);
lvtabla=celdas(nivel);
tipoArr=Ftipo(nivel);
linkArr=Flink(nivel);

for (l=3;l>=nivel;l--)
{
mimenu=niveles(1);
obj=document.getElementById(mimenu);
lvtabla=celdas(l);
hijouno=document.getElementById(lvtabla);
if (hijouno)
{
obj.removeChild(hijouno);
}
}

lvmenu=niveles(nivel);
obj.style.visibility = "visible";
myTable = document.createElement("TABLE");
myTable.id = lvtabla;
myTable.border = "1";
myTableBody = document.createElement("TBODY");
for (var q=grupoArr.length; q>=0; q--)
{
if (dependeArr[q]==newobj)
{
textVal = contenidoArr[q];
gvNivel = nivelArr[q];
gvDepende = grupoArr[q];
gvTipo = tipoArr[q];
gvLink = linkArr[q];
if (gvTipo=="M")
{
row = document.createElement("TR");
cell = document.createElement("TD");
cell.setAttribute("WIDTH","15%");
cell.setAttribute("HEIGHT","50");
cell.id=gvDepende;
cell.onmouseover=function(){despMenu
(lvmenu,1,gvDepende,gvNivel,this.id); return false;};
textNode = document.createTextNode(textVal);
cell.appendChild(textNode);
row.appendChild(cell);
myTableBody.appendChild(row);
}
else {
row = document.createElement("TR");
cell = document.createElement("TD");
cell.setAttribute("WIDTH","50");
cell.setAttribute("HEIGHT","50");
ref = document.createElement("A");
ref.href=gvLink;
textNode = document.createTextNode(textVal);
ref.appendChild(textNode);
cell.appendChild(ref);
row.appendChild(cell);
myTableBody.appendChild(row);
}
}
myTable.appendChild(myTableBody);
obj.appendChild(myTable);
}
} else
{
obj.style.visibility = "hidden";
}
}

el cuerpo es el siguiente

<div id="Menu1" class="cabMenu" >
<table>
<?php
while($filas=pg_fetch_assoc($nivelcero))
{
?>
<tr><td onMouseover="despMenu('itMenu1',1,<?php echo $filas['tr_id'];?>,<?php echo $filas['tr_nivel'];?>,this.id)" id="<?php echo $filas['tr_id'];?>"><?php echo $filas['wp_tramite'];?></td></tr>
<?php
}
?>
</table>
<div id="itMenu1" class="itMenu" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)">
</div>
</div>
<div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,0)" onMouseout="destacar(this,1)" >
</div>
<div id="itMenu12" class="itMenuAct" onMouseout="destacar(this,1)" >
</div>
<div id="itMenu13" class="itMenuAct" onMouseout="destacar(this,1)" >
</div>

Bueno perdonen la redundancia de código, apenas son mis pinitos en la web