JavaScript добавляет событие в сгенерированный элемент элемента с innerHtml

Я хочу добавить событие к элементу, которого нет в исходном 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.

Вам нужен делегация мероприятия. Прикрепите прослушиватель к родительскому элементу и пусть он следит за событиями от его дочерних элементов, когда они «пузырятся» в DOM.

Andy 09.04.2022 23:15

Также помните, что вы добавляете элементы с помощью id. Идентификаторы должны быть уникальными. Атрибут class может быть более подходящим в этом случае.

Emiel Zuurbier 09.04.2022 23:17
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
2
21
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

вар 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();
    }
});

Другие вопросы по теме