CODEWITHSUNDEEP
javascriptdom-events
Nafiz Imtiaz
Nafiz Imtiaz

Reputation: 53

How to set stopPropagation() on dynamic elements

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 class="new">new-1</li>
        <li class="new">new-2</li>
        <li class="new">new-3</li>
        <li class="new">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();
    })
}

Upvotes: 2

Views: 110

Answers (1)

amel
amel

Reputation: 1154

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 class="new">new-1</li>
    <li class="new">new-2</li>
    <li class="new">new-3</li>
    <li class="new">new-4</li>
</div>

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

Upvotes: 2

Related Questions