Додайте подію 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>

Тепер зображення чудово малюється всередині браузера. Але коли я натискаю зображення, я не отримую цього сповіщення.

.onclickмає бути встановлена ​​функція замість рядка. Спробуйте

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

замість цього.

Не впевнений, але спробуйте:

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

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

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

ви не можете призначити подію за допомогою рядка. Використовуйте це:

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

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

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

Відповідь трохи довша: вам доведеться написати ще кілька рядків коду, щоб це працювало послідовно в браузерах.

Справа в тому, що навіть довгий-довгий код, який може вирішити цю конкретну проблему в наборі звичайних браузерів, все одно матиме власні проблеми. Тож якщо вам не байдужа підтримка між браузерами, скористайтеся абсолютно короткою. Якщо ви дбаєте про це і абсолютно хочете, щоб ця одна річ спрацювала, скористайтеся комбінацією addEventListenerі attachEvent. Якщо ви хочете мати змогу широко створювати об’єкти та додавати та видаляти прослуховувачі подій у коді, і хочете, щоб це працювало у браузерах, ви обов’язково хочете делегувати цю відповідальність бібліотеці, такій як jQuery.

Я не думаю, що ви можете зробити це таким чином. Ви повинні використовувати:

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

Документація тут .

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

О, і переконайтеся, що ваш HTML перевіряється! Це може бути проблемою.

JQuery:

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

або:

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

не можу сказати чому, але синтаксис es5 / 6 не працює

elem.onclick = (ev) => {console.log(this);} не працює

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

У випадку, якщо ви не хочете писати весь код, який ви колись написали у функції, яку ви викликали. Будь ласка, використовуйте такий код, використовуючи jQuery:

$ (елемент) .on ('клацніть', функція () {add_img ();});