Ручка стрельбы несколько раз

Question

У меня есть следующие функции:

function isAdded(el){ 
    if(!$(el).closest('tr').hasClass('cloned')){ 
     $(el).closest('tr').addClass('cloned'); 
     var row_variant_index = $("#items tbody tr.variant").index($(el).closest('tr')); 
     $(el).closest('tr').attr('data-index',row_variant_index); 
     var clone = $(el).closest('tr').clone(true); 
     clone.find('button').remove(); 
     clone.find('td').last().prepend("<button name='delete'>x</button>"," ","<button name='decrement'>-</button>").append("<button name='increment'>+</button>"); 
     clone.appendTo('#cloned-items tbody'); 
    } 
} 

function handleButton(el){ 
    var input_box = $(el).siblings('input'); 
    switch ($(el).attr('name')){ 
    case 'decrement': 
     if(parseInt($(input_box).val()) > 0){ 
     $(input_box).val(parseInt($(input_box).val() - 1)); 
     } 
     break; 
    case 'increment': 
     $(input_box).val(parseInt($(input_box).val() + 1)); 
     break; 
    } 
} 

Эти функции, используемые в этой ручке:

$("button[name='addItem']").click(function(){ 
    if (!$(this).siblings('input').val().match(/\d+/)){ 
     alert("You can only type numbers!"); 
     return; 
    } 
    isAdded(this); 
    $("#cloned-items tbody").on('click',"button",function(){handleButton(this)}); 
    }); 

Моя проблема заключается в том, что если добавить больше чем 1 клонированный элемент, в кнопка начинает добавление или вычитание n + 1 раз (если у меня есть 2 клона, это будет добавление или вычитание 2, если у меня 3, это добавит или вычтен 3 и так далее).

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Причина вы добавляете новый прослушиватель событий

$("#cloned-items tbody").on('click',"button",function(){handleButton(this)}); 

каждый раз нажать кнопку

Таким образом, вы просто должны убедиться, что вы не вызываете его снова после того, как другой мыши

Редактировать

Как указано @JeremyJStarcher, вы можете использовать off() для удаления ранее добавленных обработчиков.

$("#cloned-items tbody").off().on('click',"button",function(){handleButton(this)}); 

Answer 2

Делегирование событий необходимо выполнить один раз, не каждый раз, когда вы добавляете в DOM другой элемент. Это то, что отличает его от обычного привязки к событию, оно будет динамически найдено на любом элементе, который соответствует селектору внутри элемента, который вы делегировали. Так возьмите

$("#cloned-items tbody").on('click',"button",function(){handleButton(this)}); 

из click() обработчика, и просто сделать это один раз в $(document).ready() обработчика.