JavaScript adding event on element generated element with innerHtml-CodePudding

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 >
              <p >Mown Lawn <span id="remove">remove</span></p>
              <p ><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.

CodePudding user response：

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

CodePudding user response：

btnMow.addEventListener("click", function mow() {
    if (sMow === true) {
        reqServices.push("Mow Lawn");
        service.innerHTML  = `
            <div >
                <p >Mown Lawn <span id="remove">remove</span></p>
                <p ><span>$</span>20</p>
            </div>`;
        sMow = false;
        total  = 20;
        totalC();
    }
    const btnRemove = document.getElementById("remove");

    btnRemove.addEventListener("click", function remove() {
        alert("HELLO");
    });
});

CodePudding user response：

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

write this before starting click event