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

Я пытаюсь добавить событие 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>

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

Ответы

Ответ 1

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

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

вместо.

Ответ 2

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

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

Ответ 3

Вы также можете установить атрибут:

elem.setAttribute("onclick","alert('blah');");

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Документация прямо здесь.

Ответ 7

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

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

Ответ 8

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

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