How to rebind an event listener to elements that are removed and added again

Question

I have built a pretty complex slider and now have to build it so it can be removed and re-added to the page based on a selection. I have a simple click event listener for the pagination to call all my animations and timers that looks like this

let $slideItems = $slideShow.querySelector('.slideshow-items'),
    $slideshowNav = $slideShow.querySelector('.slideshow-nav'),
    $slideshowNavButton = $slideshowNav.getElementsByTagName('button');

forEach($slideshowNavButton, (index, el) => {
    el.addEventListener('click', function() {
        let isActive = this.classList.contains('active');

        if (!isActive) {
            clearTimeout(timer);
            slideshowClick($slideShow, this);
            slideshowAnimations($slideShow, index);
            slideTimer();
        }
    });
});

I use the forEach function as a for loop to go through all the elements I need, like having multiple $slideShow's on the page, and return them as an indexed array. The issue I am having is that I need to add a functionality in which the $slideshowNav and all the $slideshowNavButtons get removed and rebuilt from a function outside of the $slideshow function and can't figure out how to rebind the click event without repeating all of the code. Is there a way to bind this event to the $slideshow object, similar to the way jQuery's .on function works or rebind the click event to the new $slideshowNavButton's after they are created? I am not able to use jQuery so I can't use the .on function.

It sounds like you're looking for vanilla JS event delegation https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — CertainPerformance, Aug 25 '18 at 01:13
I think this is what I am looking for. I will go through that and see if I can get what I need working. Thank you. — Scott Borrowman, Aug 25 '18 at 03:43
It looks like what I want to do is bind the event to a parent element and use `event.target` to check which child element triggered it. — Scott Borrowman, Aug 25 '18 at 04:00

score 0 · Answer 1 · answered Aug 25 '18 at 01:57

its hard to give you correct answer since you motion too many classes without visual placement but hope this helps:

 var btnWraper = document.querySelectorAll('.btnWraper > button');
                    btnWraper.forEach(function(e){
                     e.onclick = buttonClicking;;
                })

        let remake = document.getElementById('reMakeMe');
        remake.addEventListener('click', function(){
            var btnWraper = document.querySelectorAll('.btnWraper > button');
                //if deleted
                if(!btnWraper.length) 
                {
                    createButtons('Btn1'); 
                    createButtons('Btn2'); 
                    createButtons('Btn3'); 
                    createButtons('Btn4'); 
                }

        },false) 

        let rest = document.getElementById('resetMe');  
        rest.addEventListener('click', function(){
            var btnWraper = document.querySelectorAll('.btnWraper > button');
            btnWraper.forEach(function(e){
                     e.remove();
                })
        },false) ;

        function buttonClicking (){
            alert(this.innerHTML);
        }

        function createButtons(value){
            var btn = document.createElement("button");
            btn.innerHTML = value; 
            btn.onclick = buttonClicking;

            var parentElement = document.getElementsByClassName("btnWraper")[0]; 
            parentElement.appendChild(btn);
        }

<div class="btnWraper">
            <button>Btn1</button>
            <button>Btn2</button>
            <button>Btn3</button>
            <button>Btn4</button>
        </div>

<div>
    <button id="resetMe">Reset All</button>
    <button id="reMakeMe">ReMake All</button>
</div>

This isn't what I'm looking for. I know how to create the buttons. What I need is how to get all of my click functions to work on the newly created functions. It looks like the comment about the event delegation is what I'm looking for. Thank you, though. — Scott Borrowman, Aug 25 '18 at 03:43
it wasn't about to show you how to create new buttons its was just an example to show you a way to add click function to new created element/ //btn.onclick = buttonClicking; or you use bind or call function — K. Younes, Aug 25 '18 at 04:03

How to rebind an event listener to elements that are removed and added again

1 Answers1