Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

149
Visualizações
JavaScript adding event on element generated element with innerHtml

I want to add an event on an element does doesn't exist in the original HTML (created with innerHtml). When i click nothing happens.

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");
});

I want to add a click event on the element with id remove.

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

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");
    });
});
about 4 years ago · Juan Pablo Isaza Relatório

0

Another way to do that is creating the elements instead of use the HTML code and a later search. This maybe useful if you, for example, don't want to add an id to the remove tag

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

As you can see, creating the elements allow you do whatever you want with it. It's longer but you can use a helper function like this:

function appendTag(parent, tagName, className) {
    var tag = document.createElement(tagName);

    if (className)
        tag.className = className;

    parent.appendChild(tag);
    return tag;
}

And rewrite as:

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();
    }
});
about 4 years ago · Juan Pablo Isaza Relatório

0

var btnremove = document.getElementById("remove");

write this before starting click event

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda