Я хочу добавить событие к элементу, которого нет в исходном HTML (созданном с помощью innerHtml
). Когда я нажимаю, ничего не происходит.
const btnRemove = document.getElementById("remove");
btnMow.addEventListener("click", function mow() {
if (sMow === true) {
reqServices.push("Mow Lawn");
service.innerHTML += `
<div class = "v1">
<p class = "v3-text">Mown Lawn <span id = "remove">remove</span></p>
<p class = "v3-dollar"><span>$</span>20</p>
</div>`;
sMow = false;
total += 20;
totalC();
}
});
btnRemove.addEventListener("click", function remove() {
alert("HELLO");
});
Я хочу добавить событие клика на элемент с идентификатором remove
.
Также помните, что вы добавляете элементы с помощью id
. Идентификаторы должны быть уникальными. Атрибут class
может быть более подходящим в этом случае.
вар btnremove = document.getElementById("удалить");
напишите это перед запуском события клика
btnMow.addEventListener("click", function mow() {
if (sMow === true) {
reqServices.push("Mow Lawn");
service.innerHTML += `
<div class = "v1">
<p class = "v3-text">Mown Lawn <span id = "remove">remove</span></p>
<p class = "v3-dollar"><span>$</span>20</p>
</div>`;
sMow = false;
total += 20;
totalC();
}
const btnRemove = document.getElementById("remove");
btnRemove.addEventListener("click", function remove() {
alert("HELLO");
});
});
Другой способ сделать это — создать элементы вместо использования HTML-кода и последующего поиска. Это может быть полезно, если вы, например, не хотите добавлять идентификатор в тег удаления.
btnMow.addEventListener("click", function mow() {
if (sMow === true) {
reqServices.push("Mow Lawn");
var div = document.createElement("div");
div.className = "v1";
service.appendChild(div);
var p1 = document.createElement("p");
p1.className = "v3-text";
div.appendChild(p1);
var p1Text = document.createTextNode("Mown Lawn ");
p1.appendChild(p1Text);
var p1Span = document.createElement("span");
p1Span.setAttribute("id", "remove");
p1Span.innerText = "remove";
p1Span.addEventListener("click", function remove() {
alert("HELLO");
});
p1.appendChild(p1Span);
var p2 = document.createElement("p");
p2.className = "v3-dollar";
p2.innerHTML = "<span>$</span>20";
div.appendChild(p2);
sMow = false;
total += 20;
totalC();
}
});
Как видите, создание элементов позволяет вам делать с ними все, что вы хотите. Это длиннее, но вы можете использовать вспомогательную функцию следующим образом:
function appendTag(parent, tagName, className) {
var tag = document.createElement(tagName);
if (className)
tag.className = className;
parent.appendChild(tag);
return tag;
}
И переписать как:
btnMow.addEventListener("click", function mow() {
if (sMow === true) {
reqServices.push("Mow Lawn");
var div = appendTag(service, "div", "v1");
var p1 = appendTag(div, "p", "v3-text");
p1.appendChild(document.createTextNode("Mown Lawn "));
var p1Span = appendTag(p1, "span");
p1Span.setAttribute("id", "remove");
p1Span.innerText = "remove";
p1Span.addEventListener("click", function remove() {
alert("HELLO");
});
var p2 = appendTag(p1, "p", "v3-dollar");
p2.innerHTML = "<span>$</span>20";
sMow = false;
total += 20;
totalC();
}
});
Вам нужен делегация мероприятия. Прикрепите прослушиватель к родительскому элементу и пусть он следит за событиями от его дочерних элементов, когда они «пузырятся» в DOM.