Question

我正在研究一个任意项目，我正在尝试只使用香草JS，因为我是一个受虐狂。我将其设置为显示项目列表，每个项目都有一个按钮，用于将项目添加到“购物车”。当它们被添加到购物车时，每个包含项目信息和按钮的新div被推入侧边栏div。当按下用于将项目添加到购物车的按钮时，它会调用该函数，该函数将事件监听器添加到具有其自己唯一ID的移除项按钮。我的问题是再次将项目添加到购物车，只有最后一项的删除按钮工作。这是JS的相关部分：

这为添加到购物车按钮设置了eventListeners：

function setupItemClickHandlers(items) {
    var buttons = document.getElementsByClassName('add-cart');
    var i; 

    function generateItemClickHandler(itemNumber) {
        return function clickHandler() {
            // does things to the objects
            setupCartItemClickHandlers(itemCartNum);
        }
    }

    for(i = 0; i < buttons.length; i++){
        buttons[i].addEventListener('click', generateItemClickHandler(i));
    }
}

设置删除项按钮事件监听器的代码（注意：我将格式化函数添加到String的原型中，唯一的数字插入到那里）：

function setupCartItemClickHandlers(itemNum){
    var elCartItem = document.getElementById('item-{0}'.format(itemNum));
    var removeButton = document.getElementById('remove-{0}'.format(itemNum));

    function generateRemoveClickHandler(itemNum) {
        return function clickHandler() {
            // Does what it needs to do
        }
    }

    removeButton.addEventListener('click', generateRemoveClickHandler(itemNum));
}

Here's the fiddle

Answer 1

你可以创建（比如jQuery live / on）事件监听器，只有一次，对于带有event.target和event.srcElement的购物车的父项

添加子div时，JS事件侦听器停止工作，只有最后一个div事件侦听器工作

1 个答案: