javascript - 仅当数组包含奇数个项目时，删除动态填充的 <li> 才有效

Question

项目实例:http://jsfiddle.net/k3buckuc/

enterItem = []
itemNumber = 0

// mark item as checked and add delete functionality 
function check() {
    $('#itemsListed').on('click', 'li', function() {    
        $(this).toggleClass('checked');
        $(this).append('<hr />');
        $(this).append('<button class="trash">X</button>');
        $(this).not('.checked').find('hr').remove();
        $(this).not('.checked').find('button').remove();
        // enable trash or delete functionality individual list items
        $('.trash').on('click', function() {
            $(this).closest('li').remove();
        });
    });
}

仅当 itemNumber 为奇数或 EnterItem 包含奇数个项目时才能正确执行

查看 fiddle 来检查我如何将项目插入数组以及我的增量技术

Answer 1

那是因为您一遍又一遍地绑定(bind)相同的事件。每次添加项目时，都会为单击事件绑定(bind)另一个处理程序。

当您添加偶数个项目时，也会添加偶数个事件处理程序。当您单击某个项目时，第二个处理程序将撤消第一个处理程序所做的操作。

例如，当您有十个项目时，事件处理程序将被调用十次。由于最终结果与事件处理程序被调用零次相同，因此看起来什么也没有发生。

只需绑定(bind)事件处理程序一次，而不是每次添加项目时都绑定(bind)。