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

Question

I'm working on a arbitrary project, and I'm trying to only use vanilla JS because I'm a masochist. I have it set up to display a list of items, each with a button to add the item to to the 'cart'. When they get added to the cart each a new div containing the item information and a button is pushed into the sidebar div. When the button for the add item to cart is pushed it makes a call to the function that adds the event listener to the remove item button which have their own unique id's. My problem is once more items are added to the cart, only the last item's remove button works. Here's the relevant bit of JS:

This sets the eventListeners for the add to cart buttons:

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

And the code that sets the remove items buttons event listeners (Note: I added the format function to String's prototype, the unique numbers are getting inserted there):

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

您只能使用event.target和event.srcElement为购物车的父项创建（像jQuery live / on）事件监听器一次。