Question

我已经构建了一个非常复杂的滑块，现在必须对其进行构建，以便可以根据选择将其删除并重新添加到页面中。我有一个简单的click事件侦听器，可用于分页，以调用我所有的动画和计时器，如下所示：

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和所有$slideshowNavButton从$slideshow函数外部的函数中删除并重建，并且无法了解如何在不重复所有代码的情况下重新绑定click事件。是否有一种方法可以将此事件绑定到$slideshow对象，类似于jQuery的.on函数的工作方式，还是将click事件绑定到新的$slideshowNavButton之后，将其绑定到新的.on？我无法使用jQuery，因此无法使用for函数。

Answer 1

很难为您提供正确的答案，因为您在没有视觉位置的情况下移动了过多的课程，但希望这会有所帮助：

 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>

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

1 个答案: