Come modificare il gestore onClick in modo dinamico?

Sono sicuro che ci sono un milione di post su questo, ma sorprendentemente ho difficoltà a trovare qualcosa.

Ho un semplice script in cui voglio impostare il gestore onClick per un collegamento sull’inizializzazione della pagina.

Quando lo eseguo, ottengo immediatamente una casella di avviso “foo” in cui mi aspettavo di ricevere un avviso solo quando clicco sul link.

Che cosa stupida sto sbagliando? (Ho provato click = e onClick =) …

  function init(){ document.getElementById("foo").click = new function() { alert('foo'); }; }   Click to run foo  

Modifica: ho modificato la mia risposta accettata a una risposta jQuery. La risposta di ” Már Örlygsson ” è tecnicamente la risposta corretta alla mia domanda iniziale ( click dovrebbe essere onclick e la new dovrebbe essere rimossa) ma scoraggia fortemente chiunque a usare “document.getElementById (…) direttamente nel loro codice – e a usa invece jQuery .

jQuery:

 $('#foo').click(function() { alert('foo'); }); 

O se non vuoi che segua il link href:

 $('#foo').click(function() { alert('foo'); return false; }); 

Provare:

 document.getElementById("foo").onclick = function (){alert('foo');}; 

Usa. .onclick (tutto in minuscolo). Così:

 document.getElementById("foo").onclick = function () { alert('foo'); // do your stuff return false; // <-- to suppress the default link behaviour }; 

In realtà, probabilmente ti troverai molto meglio usando una buona libreria (consiglio jQuery per diversi motivi) per farti funzionare e scrivere javascript pulito.

Le compatibilità tra browser (in) sono un vero inferno da affrontare per chiunque - per non parlare di qualcuno che sta appena iniziando.

Ho provato più o meno tutte le altre soluzioni l’altro giorno, ma nessuno di loro ha funzionato fino a quando non ho provato questo:

 var submitButton = document.getElementById('submitButton'); submitButton.setAttribute('onclick', 'alert("hello");'); 

Per quanto posso dire, funziona perfettamente.

Se si desidera passare variabili dalla funzione corrente, un altro modo per farlo è, ad esempio:

 document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')"); 

Se non hai bisogno di passare informazioni da questa funzione, è solo:

 document.getElementById("space1").onclick = new Function("lrgWithInfo('13')"); 

OMG … Non è solo un problema di “libreria jQuery” e “getElementById”.

Certo, jQuery ci aiuta a mettere da parte i problemi del cross-browser, ma usare il modo tradizionale senza le librerie può ancora funzionare bene, se davvero comprendi JavaScript BASTA !!!

Entrambi @ Már Örlygsson e @Darryl Hein ti hanno dato dei bei ALTARNATIVI (direi, sono solo altarnativi, non ansiosi), dove il primo usava il modo tradizionale e il secondo modo jQuery. Ma conosci davvero la risposta al tuo problema? Cosa c’è di sbagliato nel tuo codice?

Innanzitutto, .click è un modo jQuery. Se si desidera utilizzare la modalità tradizionale, utilizzare invece. Oppure ti consiglio di concentrarti sull’imparare a usare solo jQuery, in caso di confusione. jQuery è un buon strumento da usare senza conoscere abbastanza DOM.

Il secondo problema, anche quello critico, la new function(){} è una syntax molto brutta, oppure dire che è una syntax sbagliata.

Non importa se vuoi andare con jQuery o senza di esso, devi chiarirlo.

Ci sono 3 modi fondamentali per dichiarare la funzione:

 function name () {code} ... = function() {code} // known as anonymous function or function literal ... = new Function("code") // Function Object 

Nota che javascript fa distinzione tra maiuscole e minuscole , quindi la new function() non è una syntax standard di javascript. I browser potrebbero fraintendere il significato.

Quindi il tuo codice può essere modificato usando il secondo modo come

  = function(){alert();} 

O usando il terzo modo come

  = new Function("alert();"); 

Elaborando su di esso, il secondo modo funziona quasi come il terzo modo, e il secondo modo è molto comune, mentre il terzo è raro. Entrambe le tue migliori risposte usano il secondo modo.

Tuttavia, il terzo modo può fare qualcosa che il secondo non può fare, a causa di “runtime” e “tempo di compilazione”. Spero solo che tu sappia che la new Function() può essere utile a volte. Un giorno incontri problemi usando function(){} , non dimenticare new Function() .

Per saperne di più, si consiglia di leggere << JavaScript: The Definitive Guide, 6th Edition >>, O’Reilly.

Sono d’accordo che l’utilizzo di jQuery è l’opzione migliore. Dovresti anche evitare di usare la funzione di caricamento del corpo e usare invece la funzione ready di jQuery. Per quanto riguarda gli ascoltatori di eventi, dovrebbero essere funzioni che prendono un argomento:

 document.getElementById("foo").onclick = function (event){alert('foo');}; 

o in jQuery:

 $('#foo').click(function(event) { alert('foo'); } 

Ecco la controparte YUI dei post di jQuery qui sopra.

  

Penso che tu voglia usare i metodi .bind e .unBind di jQuery. Nel mio test, la modifica dell’evento click con .click e .onclick ha effettivamente chiamato l’evento appena assegnato, determinando un ciclo senza fine.

Ad esempio, se gli eventi in cui si effettua la commutazione sono hide () e unHide (), e facendo clic su uno passa l’evento click all’altro, si finisce in un ciclo continuo. Un modo migliore sarebbe quello di fare questo:

 $(element).unbind().bind( 'click' , function(){ alert('!') } ); 

Nessuno ha affrontato il problema reale che stava accadendo, per spiegare perché è stato emesso l’allarme.

Questo codice: document.getElementById("foo").click = new function() { alert('foo'); }; document.getElementById("foo").click = new function() { alert('foo'); }; assegna la proprietà #foo dell’elemento #foo a un object vuoto. La funzione anonima qui è destinata a inizializzare l’object. Mi piace pensare a questo tipo di funzione come costruttore. Metti l’avviso lì dentro, quindi viene chiamato perché la funzione viene chiamata immediatamente.

Vedi questa domanda

L’esempio di YUI sopra dovrebbe essere davvero: