Javascript 处理多次射击

我有以下职能：

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;
  }
}

我的问题是，如果我添加了多个克隆项，按钮开始添加或减去n+1次（如果我有2个克隆项，它将添加或减去2，如果我有3个克隆项，它将添加或减去3，依此类推）

---

有人能告诉我我做错了什么吗？

原因是您正在添加新的事件侦听器

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

每次你点击按钮

因此，您只需确保在再次单击后不会再次调用它

编辑

正如@JeremyJStarcher所指出的，您可以使用

off（）

函数删除以前添加的处理程序

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

---

事件委派只需要执行一次，而不是每次向DOM添加另一个元素时。这就是它不同于普通事件绑定的原因，它将在与您从中委派的元素中的选择器匹配的任何元素上动态找到。因此，采取

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

---

从

click（）

处理程序中，只需在

$（document）.ready（）

处理程序中执行一次即可。

快速拉小提琴会很有帮助。`$（“#克隆项目tbody”）.off（）.on（'click'，“button”，function（）{handleButton（this）}）`也可以。@JeremyJStarcher Nice我从来没有使用过

off（）

：）您可以编辑您的答案以包含

off（）

，还是Jeremy正在回答？它起作用了。。我不知道元素可以有重复的句柄。

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