How to set stopPropagation() on dynamic elements-CodePudding

I tried stopPropagation() on the static elements and its working.after that ,I have tried to use stopPropagation() on dynamically created elements but its not working. can anyone please tell me how to use stopPropagation() on dynamically elements?

html:

<body>
    <div id="main">
        <li >new-1</li>
        <li >new-2</li>
        <li >new-3</li>
        <li >new-4</li>
    </div>

    <button id="add">add</button>


    <script src="dom.js"></script>
</body>

script:

let main = document.getElementById("main");

let add = document.getElementById('add');


main.addEventListener('click', function (event) {

    let el = main.children;

    for (let e of el) {
        if (event.target == e) {
            event.target.parentNode.removeChild(event.target);
        }

    }
})

add.addEventListener("click", function () {
    let li = document.createElement("li");
    li.classList.add('new2');

    li.innerText = "this is the new text";
    console.log(li);
    main.appendChild(li);
})

// stopPropagation() is working here

let staticElements = document.getElementsByClassName("new");

for (let staticElement of staticElements) {

    staticElement.addEventListener("click", function (e) {

        e.stopPropagation();
    })
}

//stopPropagation() is not working here

let dynamicElements = document.getElementsByClassName("new2");

for (let dynamicElement of dynamicElements) {

    dynamicElement.addEventListener("click", function (e) {

        e.stopPropagation();
    })
}

CodePudding user response：

Add the onClick EventListener to the dynamic element creation, Like this:

let main = document.getElementById("main");

                let add = document.getElementById('add');


                main.addEventListener('click', function (event) {

                    let el = main.children;

                    for (let e of el) {
                        if (event.target == e) {
                            event.target.parentNode.removeChild(event.target);
                        }

                    }
                })

                add.addEventListener("click", function () {
                    let li = document.createElement("li");
                    li.classList.add('new2');

                    li.innerText = "this is the new text";
                    li.addEventListener("click", function(e) {
                       console.log("new2 clicked");
                       e.stopPropagation();
                    });
                    console.log(li);
                    main.appendChild(li);
                })

                // stopPropagation() is working here

                let staticElements = document.getElementsByClassName("new");

                for (let staticElement of staticElements) {

                    staticElement.addEventListener("click", function (e) {

                        e.stopPropagation();
                    })
                }

<div id="main">
    <li >new-1</li>
    <li >new-2</li>
    <li >new-3</li>
    <li >new-4</li>
</div>

<button id="add">add</button>