Добавить событие onclick для вновь добавленного элемента в JavaScript

Question

Я пытаюсь добавить событие onclick к новым элементам, которые я добавил с помощью JavaScript.

Проблема в том, когда я проверяю document.body.innerHTML. Я могу видеть, что onclick = alert ('blah') добавлен к новому элементу.

Но когда я нажимаю этот элемент, я не вижу, чтобы окно предупреждения работало. На самом деле все, что связано с JavaScript не работает ..

вот что я использую, чтобы добавить новый элемент:

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

Вот как я называю эту функцию:

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

Теперь изображение отлично рисует в браузере. Но когда я нажимаю изображение, я не получаю это предупреждение.

Answer 1

.onclick должно быть установлено как функция вместо строки. Попробуйте

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

вместо этого.

Answer 2

Не уверен, но попробуйте:

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

Answer 3

вы не можете назначить событие на строку. Используйте это:

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

Answer 4

Короткий ответ: вы хотите, чтобы установить обработчик функции:

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

Слегка развернутый ответ: вам придется написать несколько строк кода, чтобы получить, чтобы работать последовательно во всех браузерах.

Дело в том, что даже более длинный код, который может решить эту конкретную проблему по множеству общих браузеров, по-прежнему будет иметь свои проблемы. Поэтому, если вам не нужна поддержка кросс-браузера, переходите к совершенно короткому. Если вы заботитесь об этом и абсолютно хотите получить эту единственную работу, пойдите с комбинацией addEventListener и attachEvent. Если вы хотите широко создавать объекты, добавлять и удалять прослушиватели событий во всем своем коде и хотите, чтобы это работало в браузерах, вы определенно хотите делегировать эту ответственность библиотеке, такой как jQuery.

Answer 5

Я не думаю, что вы можете так поступать. Вы должны использовать:

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

Документация right here.

Answer 6

У вас есть три разные проблемы. Прежде всего, нужно указывать значения в тегах HTML! Не делать этого может смутить браузер и может вызвать некоторые проблемы (хотя это, вероятно, не так). Во-вторых, вы должны назначить функцию переменной onclick, как кто-то другой. Мало того, что это правильный способ сделать это в будущем, но это делает вещи намного проще, если вы пытаетесь использовать локальные переменные в функции onclick. Наконец, вы можете попробовать либо addEventListener, либо jQuery, у jQuery есть преимущество более приятного интерфейса.

О, и убедитесь, что ваш HTML проверяет! Это может быть проблемой.

Answer 7

Если вы не хотите писать весь код, который вы когда-то писали в вызываемой вами функции. Используйте следующий код, используя jQuery:

$ (элемент) .on ('click', function() {add_img();});