Aggiungi evento onclick all'elemento appena aggiunto in JavaScript

Question

Ho cercato di aggiungere eventi onclick ai nuovi elementi che ho aggiunto con JavaScript.

Il problema è quando controllo document.body.innerHTML Posso effettivamente vedere onclick = alert ('blah') aggiunto al nuovo elemento.

Ma quando faccio clic su quell'elemento non vedo che la casella di avviso funzioni. In realtà tutto ciò che riguarda JavaScript non funziona ..

qui è quello che uso per aggiungere nuovo 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; 
} 

Ecco come io chiamo questa funzione:

<button onclick=add_img()>add image</button> 

Ora l'immagine disegna perfettamente all'interno del browser. Ma quando clicco sull'immagine non ricevo quell'allarme.

Answer 1

.onclick deve essere impostato su una funzione anziché su una stringa. Prova

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

invece.

Answer 2

Non sono sicuro ma provate:

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

Answer 3

non è possibile assegnare un evento da stringa. Utilizzare quello:

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

Answer 4

Risposta breve: si desidera impostare il gestore a una funzione:

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

Leggermente risposta più: si dovrà scrivere un paio di righe di codice per ottenere che per lavorare in modo coerente tutti i browser.

Il fatto è che anche il codice leggermente più lungo che potrebbe risolvere quel particolare problema in un insieme di browser comuni avrà comunque problemi particolari. Quindi se non ti interessa il supporto cross-browser, vai con quello totalmente breve. Se ti interessa e vuoi solo far funzionare questa singola cosa, vai con una combinazione di addEventListener e attachEvent. Se vuoi essere in grado di creare estensivamente oggetti, aggiungere e rimuovere listener di eventi in tutto il codice e volere che funzioni su tutti i browser, devi assolutamente delegare tale responsabilità a una libreria come jQuery.

Answer 5

Non penso che tu possa farlo in questo modo. Si dovrebbe usare:

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

Documentazione right here.

Answer 6

Hai tre diversi problemi. Prima di tutto, i valori nei tag HTML dovrebbero essere citati! Non farlo potrebbe confondere il browser e potrebbe causare alcuni problemi (anche se probabilmente non è il caso qui). Secondo, dovresti effettivamente assegnare una funzione alla variabile onclick, come qualcun altro ha fatto la mediazione. Non solo questo è il modo corretto per farlo andare avanti, ma rende le cose molto più semplici se si sta tentando di utilizzare variabili locali nella funzione onclick. Infine, puoi provare addEventListener o jQuery, jQuery ha il vantaggio di un'interfaccia migliore.

Oh, e assicurati che il tuo codice HTML sia valido! Questo potrebbe essere un problema.

Answer 7

Nel caso in cui non si desideri scrivere tutto il codice che si è scritto una volta nella funzione chiamata. Si prega di utilizzare il seguente codice, utilizzando jQuery:

$ (elemento) .on ('click', function() {add_img();});