javascript - 动态代码中 .click() 的多个实例

Question

我有一组复杂的动态函数，我遇到了多个 .click() 实例的问题。在下面的代码中，每次调用 editChartModal() 时，第一次单击 (saveLocalChart) 仅调用一次，但每次调用函数时都会调用 removeLocalChart 单击。

function editChartModal(location) {
    if(!localStorage.getItem(location)){
        $('.saveLocalChart').click(function(e){
            e.preventDefault();
            console.log('add chart: ', location); // DEBUG
            var kpiString = $('#'+location).data('params').kpistring;
            var rtt = $('#'+location).data('params').rtt;
            saveChartLocal(location,kpiString,chartTitle,chartSubTitle,rtt);
            $('.clearChart').show();
            $('.saveChart').hide();
        });
    }else{
        $('.removeLocalChart').on('click', function(e){
            e.preventDefault();
            console.log('remove chart: ', location); // DEBUG
            localStorage.removeItem(location);
            $('.clearChart').hide();
            $('.saveChart').show();
        });
    }
}

控制台快照：

有什么想法可以导致这种情况，而无需上传我的整个代码库（已经变得臃肿）？

Answer 1

最佳做法是始终在绑定新的单击事件之前取消绑定。所以就在 before .click(...， add.unbind('click')和 before .on('click', ...， add.off('click')看看你是否还有同样的问题。

Answer 2

每次调用editChartModal()函数时，都会绑定新的单击处理程序。只需从这个函数中解开它。