jquery onclick 触发的次数是上一次点击的两倍

Question

以下 onclick 的触发次数是上一次单击的两倍。换句话说，当我第一次单击它时，它会按预期工作并且仅触发一次。但是当我再次单击(在同一行或另一行)时，它会触发两次。如果我第三次点击，它会触发 8 次，然后 16 次，然后 32 次。发生什么事了？

calcTotals: function (table){
        var totals=[];
        $(table).find('tbody').children('tr').each(function(r,row){

            $(row).on('click',function(e){
                $(this).toggleClass('selectedForTotal');
                $(table).find('tbody').children('tr:last').remove();
                dialog.calcTotals(table);
                e.stopPropagation();
                return false;
            })

             if($(row).hasClass('selectedForTotal')){
                $(this).children('td').each(function(c,cell){
                    if($(cell).hasClass('realNumber')){

                        cell.style.textAlign='right';
                        cell=$(cell).html().replace(/,/g,'').replace('(','-').replace(')','');
                        if (!totals[c]) totals[c]=0;
                        totals[c]+=parseFloat(cell);
                        $(cell).val(formatNumber(cell,2,false,true,true));

                    }else {cell.style.textAlign='left';}
                })
            }
        })

        var newRow=$('<tr>').appendTo($(table).find('tbody'))
            .attr({'id':'totals','class':'highlightRow','tabIndex':'1'})
            .on('click',function(i,item){
                $(this).toggleClass('highlightRow');
        }).css('cursor','pointer');

        console.log('total : '+totals);

        $(totals).each(function(i,item){
            $('<td>').html(item?   formatNumber(totals[i],2,false,true,true):'').appendTo(newRow);
        })

        $(newRow).focus();
    }

Answer 1

问题在于您的 calcTotals 函数绑定(bind)了 click 事件处理程序，但随后您的 click 事件处理程序调用了 calcTotals (将另一个 click 事件处理程序绑定(bind)到所有这些元素)。

因此，您调用 calcTotals 一次，每个元素就有一个 click 事件处理程序。您单击其中一个，calcTotals 会再次被调用，现在每个元素都有两个 click 事件处理程序。然后您再次单击，两个事件处理程序都会被触发，从而绑定(bind)另外两个 click 事件处理程序(现在总共有四个)。下次单击会添加另外四个(总共八个)，依此类推。

您需要绑定(bind)一次 click 事件处理程序，与 calcTotals 函数分开。