动态代码中的.click（）的多个实例

Question

我有一组复杂的动态函数，我遇到了多个.click（）实例的问题。在下面的代码中，第一次单击（saveLocalChart）只在每次调用editChartModal（）时调用一次，但每次调用函数时都会调用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

最佳做法是在绑定新事件之前始终取消绑定click事件。因此，在.click(...之前添加.unbind('click')并在.on('click', ...之前添加.off('click')，看看您是否还有同样的问题。

Answer 2

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