Как установить событие onclick в innerHTML?
я пытаюсь использовать innerHTML для вставки некоторых данных на html-страницу, например, ниже
for(i = 0; i < data.length; i++){
var line = data[i].split("~");
nameslist.innerHTML += '<p onClick='+userclick(line[1])+'><strong>' + line[0] + ' </strong></p>';
}
но событие onclick запускается автоматически сразу после вставки, и оно не срабатывает, когда я нажимаю на элемент <p>
как мне правильно использовать innerhtml, чтобы добавить элемент p с событием onclick и запускать его только при нажатии пользователем?
createElement, appendChild и addEventListener. Это более подробно, но много легче поддерживать.
Я думаю, это будет зависеть от того, какой вариант ES вам нужно использовать с точки зрения использования строк шаблона или функций стрелок. Вы всегда можете использовать setAttribute позже. developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
<p> элементы не предназначены для интерактивности. Вы можете добавить к ним обработчик события щелчка, но затем кто-то приходит и не может использовать мышь, но не может сфокусировать <p>, потому что он не предназначен для управления пользовательским интерфейсом. Используйте соответствующие элементы (например, <button>).
о, это хорошая мысль @Quentin
@rpivovar - setAttribute является частью стандарта DOM, а не EcmaScript. Использовать это в сочетании с innerHTML будет… сложно. Сначала вам нужно получить ссылку на новый элемент…
Правда, это не будет элегантно, но сработает.
@Квентин попробовал кнопку, но она не срабатывает nameslist.innerHTML += '<button onclick = "userclick(' + line[1] + ')"><strong>' + line[0] + ' </strong></button>';
@DelphiStudent — прочитайте мой первый комментарий. Вы не последовали совету, который я дал там. (Вы также не указали минимальный воспроизводимый пример)
@Quentin хорошо, я буду работать с прослушивателем событий.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы хотите использовать другой подход, вы можете добавить прослушиватель событий к родительскому узлу и позволить событию клика подняться к родителю.
Пример можно найти здесь: https://davidwalsh.name/event-delegate
// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if (e.target && e.target.nodeName == "LI") {
// List item found! Output the ID!
console.info("List item ", e.target.id.replace("post-", ""), " was clicked!");
}
});
я принимаю этот ответ, поскольку он относится к использованию прослушивателя событий, как прокомментировал @Quentin
Вы вызываете функцию, а не присваиваете содержимое атрибуту. Просто поместите его в строку.
'<p onClick = "userclick(line[1])">