时间戳

首页 > 解决方案 > 如何将事件侦听器重新绑定到已删除并再次添加的元素

javascript - 如何将事件侦听器重新绑定到已删除并再次添加的元素

问题描述

我已经构建了一个非常复杂的滑块，现在必须构建它，以便可以根据选择将其删除并重新添加到页面中。我有一个简单的分页点击事件监听器来调用我所有的动画和计时器，看起来像这样

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

我使用 forEach 函数作为 for 循环来遍历我需要的所有元素，比如$slideShow在页面上有多个 '，并将它们作为索引数组返回。我遇到的问题是我需要添加一个功能，其中$slideshowNav和所有的$slideshowNavButtons 都从函数外部的$slideshow函数中删除和重建，并且无法弄清楚如何在不重复所有代码的情况下重新绑定 click 事件。有没有办法将此事件绑定到$slideshow对象，类似于 jQuery.on函数的工作方式，或者在创建后将 click 事件重新绑定到 new $slideshowNavButton？我无法使用 jQuery，因此无法使用该.on功能。

标签： javascriptjqueryslideshow

解决方案

由于您在没有视觉位置的情况下移动了太多课程，因此很难给您正确的答案，但希望这会有所帮助：

 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>

推荐阅读