Добавить событие 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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

Answer 7

не могу сказать почему, но синтаксис es5 / 6 не работает

elem.onclick = (ev) => {console.log(this);} не работает

elem.onclick = function(ev) {console.log(this);} рабочий

Answer 8

JQuery:

elemm.attr("onclick", "yourFunction(this)");

или

elemm.attr("onclick", "alert('Hi!')");

Answer 9

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

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

Answer 10

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

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