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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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();
    }
});

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