onclick che si esegue da solo

[gasparirob]

Ciao a tutti,
cercherò di essere il piu schematico possibile.

Sto avendo un problema sull'onclick di un elemento modificato dinamicamente.

Creo una tabella in php, a dei determinati TD aggiungo una funzione da eseguire all'onclick per rendere il contenuto editabile. Eseguendo questa funzione, all'interno del TD, aggiungo un campo input (con valore del contenuto del TD) e aggiungo un pulsante per annullare e un pulsante per salvare ed elimino l'attributo onclick (per evitare che cliccando ancora sul TD venga rieseguita la funziona per editare il campo)
Sul pulsante per annullare aggiungo una funziona da eseguire sull'onclick. Quest'ultima effettua il ripristino del valore originale e aggiunge all'attributo onclick la funzione per editare il contenuto (il caso di partenza).
Bene, il problema è qui: l'evento onclick parte al momento dell'attribuzione di setAttribute.
Ovvero, se il codice da eseguire per ripristinare il contenuto (per semplificare) è:

document.getElementById(idCella).setAttribute("onc lick","alert('ciao')");
(ho sostituito la funzione per editare con un alert)

appena clicco sul pulsante per annullare, mi viene ripristinato il backup del valore iniziale e subito dopo appare l'alert. Che invece dovrebbe comparire quando poi andrò a ricliccare sul valore da editare

Com'è possibile che quell'evento onclick (assegnato al td) venga eseguito alla pressione del pulsante per annullare?


Non so quanto sia riuscito a spiegarmi...

[fcaldera]

document.getElementById(idCella).onclick = function() { alert('ciao'); };

[gasparirob]

Stesso risultato...

[gasparirob]

Se puo servire, queste sono le porzioni di codice:

1) in php, credo la tabella e quindi i vari tr e td, in particolare:

<td onclick='edit(this)' id='istrCarico$i'>$row[istr_carico]</td>

2) la funzione edit(cella), tra le varie cose, mi aggiunge un'icona con l'evento onclick

[img]../images/cancel.png[/img]


3) la funzione annullariga(riga), tra le varie cose, fa questo:

document.getElementById("istrCarico"+id).innerHTML = bakvalue;
document.getElementById("istrCarico"+id).setAttrib ute("onclick","alert('ciao')");


Quindi, ricapitolando:
al caso 1 creo il td in questione e gli assegno la funzione per editarne il valore
al caso 2, oltre ad aver creato un campo input, aggiungo un'icona per annullare la modifica (oltre ad un'altra icona per salvare)
al caso 3, ripristino il valore originale della cella e gli riassegno la funzione (in realtà qui ci va la funzione edit... ho messo un alert giusto per debug)

Il problema è che quell'alert mi compare quando clicco sull'img per annullare

[gasparirob]

$("#istrCarico"+id).click(function(event){
event.stopPropagation();
$("#istrCarico"+id).html(bakvalue);
$("#istrCarico"+id).attr("onclick","edit(this)");
}); 

cosi funziona!


anche se mi sembra un'accozzaglia di codice...

[gasparirob]

In realtà funziona solo in parte:

se clicco su un td, funziona correttamente (si aggiunge l'input, i "pulsanti" cancel e salva)
se clicco su un altro td, funziona correttamente (idem come sopra)
se clicco su qualsiasi td, funziona correttamente (idem come sopra)

se clicco sul pulsante (immagine) per annullare, funziona correttamente (viene ripristinato il valore originale, eliminando il campo input e i due "pulsanti" cancel e salva)
stessa cosa se annullo un altro td (su cui avevo cliccato in precedenza)

Adesso nasce il problema: se riclicco su uno di questi td (su cui avevo gia cliccato e successivamente annullato) oltre a rendersi editabile (giustamente) mi viene ripristinato anche l'ultimo td su cui avevo cliccato!

faccio un esempio "temporale"
https://www.dropbox.com/sh/atqn3dabh...cronologia.png

Come potete vedere, nell'ultimo caso (in rosso), quando riclicco sul secondo td mi viene ripristinato il td che gli sta sopra... oltretutto con il valore di quello sotto!!

[carlomarx]

Originariamente inviato da gasparirob
Com'è possibile che quell'evento onclick (assegnato al td) venga eseguito alla pressione del pulsante per annullare?

Succede perché quando clicchi sul bottone clicchi anche sulla cella che lo contiene. Devi bloccare la propagazione dell'evento.

[gasparirob]

Originariamente inviato da carlomarx
Succede perché quando clicchi sul bottone clicchi anche sulla cella che lo contiene. Devi bloccare la propagazione dell'evento.

in realtà nella funzione edit() avevo anche messo la seguente istruzione:
$(obj).removeAttr("onclick");

proprio per evitare che ricliccando sul td (o sul suo contenuto) si riattivasse la funzione stessa...

(ma non sono sicuro che questo c'entri con quello che dici tu...)

[gasparirob]

Tra l'altro, mi sono accorto che quel codice che ho postato prima (dove ho detto che funzionava) la riga event.stopPropagation(); non serve a nulla... l'ho levata e "funziona" lo stesso... nel senso che mi risolve il problema di prima...

[gasparirob]

Non riesco a capire... sto provando e riprovando ma non riesco a sbrogliare il bandolo della matassa...