How to not lose my event listener in Javascript each time I use .insertBefore?

king_anton 0
Viewed 22

I am attempting to move a div (which contains text and other elements) each time the user clicks the up or down arrow. The goal is to simply allow users to rearrange divs to their liking, based on clicking the appropriate arrows.

The issue I'm running into is -- when I use .insertBefore to rearrange these elements? It only allows me to click the arrow and perform that action once. After that, nothing happens. It appears that I'm losing my event listener each time I do this. Is there a way for me to somehow say: "Keep that old event listener after it gets moved?"

Here is the code:

    for (let i = 0; i < NumberOfSavedIdeas; i++) {
        document.getElementById('DeleteIdeaButton' + [i]).addEventListener('click', () => {
            var DivToDelete = document.getElementById("SavedIdeaDiv" + [i]);
            DivToDelete.remove();

            let ArrayContentMatch = FullSavedIdeasArray.indexOf(FullSavedIdeasArray[i])
            FullSavedIdeasArray.splice(ArrayContentMatch, 1);
            chrome.storage.local.set({SavedIdeas: FullSavedIdeasArray});
        });

        document.getElementById('MoveIdeaUp' + [i]).addEventListener('click', () => {
            var DivToMove1 = document.getElementById("SavedIdeaDiv" + [i]);
            var ParentDiv1 = document.getElementById("DivTesting");
            ParentDiv1.insertBefore(DivToMove1, ParentDiv1.children[i-1]);
        });

        document.getElementById('MoveIdeaDown' + [i]).addEventListener('click', () => {
            alert('move down')
        });
        }

Thanks!

google-chrome-extension javascript css html
1 Answers

This is because new element doesn't exist in DOM when all event listeners are set. Add an event listener on document instead of an element. It should be wrapped like:

for (let i = 0; i < NumberOfSavedIdeas; i++) {
    document.body.addEventListener( 'click', function (e) {
        if (e.target.id == 'YourId' + [i]) {
            yourFunction();
        }
    } );
}
Piotr Migdał0
Related