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

原因是您要添加新的事件监听器

$obj = new claseExtend() ;
$retHola =$obj->hola();
print_r($retHola);

每次点击按钮

因此，您只需确保在再次点击

后再不打电话

修改

正如@JeremyJStarcher所指出的，您可以使用$("#cloned-items tbody").on('click',"button",function(){handleButton(this)});函数删除以前添加的处理程序。

off()

Answer 2

事件委托只需要完成一次，而不是每次向DOM添加另一个元素时。这就是它与正常事件绑定的不同之处，它将在与您委派的元素中的选择器匹配的任何元素上动态找到。所以拿

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

退出click()处理程序，只需在$(document).ready()处理程序中执行一次。

处理多次射击

2 个答案: