Dodaj zdarzenie onclick do nowo dodanego elementu w JavaScript

Question

Próbowałem dodać zdarzenie onclick do nowych elementów dodanych za pomocą JavaScript.

Problem polega na tym, że sprawdzam document.body.innerHTML W rzeczywistości widzę komunikat onclick = alert ("blah") dodawany do nowego elementu.

Po kliknięciu tego elementu nie widzę okna alertu. W rzeczywistości wszystko związane z JavaScript nie działa ..

tutaj jest to, co mogę używać, aby dodać nowy element:

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; 
} 

Oto jak nazwać tę funkcję:

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

Teraz obrazu rysuje idealnie w przeglądarce. Ale kiedy kliknę obraz, nie otrzymuję tego alertu.

Answer 1

powinien być ustawiony na funkcję zamiast łańcucha. Zamiast tego spróbuj

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

.

Answer 2

Nie jestem pewien, ale spróbuj:

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

Answer 3

nie można przypisać zdarzenie przez ciąg. Użyj tego:

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

Answer 4

Krótka odpowiedź: chcesz ustawić obsługi do funkcji:

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

Nieco dłużej odpowiedź: musisz napisać jeszcze kilka linijek kodu, aby ta do pracy konsekwentnie w różnych przeglądarkach.

Faktem jest, że nawet nieznacznie dłuższy kod, który może rozwiązać ten konkretny problem w wielu typowych przeglądarkach, nadal będzie miał własne problemy. Jeśli więc nie zależy Ci na obsłudze wielu przeglądarek, skorzystaj z całkowicie krótkiej. Jeśli Ci na tym zależy i absolutnie chcesz tylko sprawić, aby ta jedna rzeczy działała, połącz ją z addEventListener i attachEvent. Jeśli chcesz mieć możliwość szerokiego tworzenia obiektów oraz dodawania i usuwania detektorów zdarzeń w całym kodzie, a chcesz, aby działały one w różnych przeglądarkach, zdecydowanie chcesz przekazać tę odpowiedzialność do biblioteki, takiej jak jQuery.

Answer 5

Nie sądzę, że można to zrobić w ten sposób. Powinieneś użyć:

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

Dokumentacja right here.

Answer 6

Masz trzy różne problemy. Przede wszystkim warto cytować wartości w tagach HTML! Nieprzestrzeganie tego może zmylić przeglądarkę i może spowodować pewne problemy (chociaż prawdopodobnie tak nie jest). Po drugie, powinieneś faktycznie przypisać funkcję do zmiennej onclick, tak jak to określił ktoś inny. Nie tylko jest to odpowiedni sposób, aby zrobić to w przyszłości, ale znacznie upraszcza to, jeśli próbujesz użyć zmiennych lokalnych w funkcji onclick. Na koniec możesz spróbować addEventListener lub jQuery, jQuery ma tę zaletę, że ma lepszy interfejs.

Aha, i upewnij się, że Twój HTML sprawdza się! To może być problem.

Answer 7

Jeśli nie chcesz pisać całego kodu, który napisałeś w wywołanej funkcji. Użyj następującego kodu, używając jQuery:

$ (element) .on ("kliknij", funkcja() {add_img();});