javascript - jQuery:通过单击删除对象会导致意外的循环

Question

我有一些代码可以在我的网站上选择这些简单的跨度并对它们应用“单击”事件处理程序。具体来说，它调用“deletePerson”函数。这是类选择代码:

jQuery('.delete-person').click(function() {
      var type = jQuery(this).data('type');
      var number = jQuery(this).data('number');
      deletePerson(type, number);
});

deletePerson 函数有点复杂，但本质上它的作用是将已删除人员的信息替换为列表中下一个人员的信息。这种转变也会发生在被删除方“上方”的整个人员列表中，以保持顺序。删除之前还会有一条确认消息。

我认为，问题在于当我单击 Person1 上的删除人员范围时，它会确认删除 Person1，然后继续提示与列表中人员相同的次数。

例如:如果有 3 个人，并且您对删除 Person1(第一个提示)说“不”，它将要求您再次删除 Person1(第二个提示)。如果您对第二个提示说"is"，则会发生删除，转移也会发生，并且它将提示您(第三个提示)删除 Person2(因为他们现在位于第一位置)。

我觉得这里有一个简单的解决方案，但我看不到它。如果已经有人问过这个问题，我深表歉意，过去半小时我一直在搜索(Google 和 Stackoverflow)，但没有成功。

编辑

这是 deletePerson 函数...有点复杂和困惑，正如我警告的那样(我正在开发一个简单的 jsFiddle 来演示我的问题):

[已删除丑陋的代码]

编辑2

这是我快速制作的演示 fiddle ，事实上，我是个白痴，我想要的功能是可能的，我只是在其他地方搞砸了:http://jsfiddle.net/ZtEuj/

编辑3

epascarello 是正确的，我多次附加点击监听器(jQuery 新手错误!)。只需在我的原始代码示例之前添加 jQuery('.delete-person').off() 就可以完美地修复它。

谢谢 epascarello!

Answer 1

好吧，现在想了一下。我认为这与您发布的代码无关。

您正在为同一个函数调用多次附加 onclick 事件。

又名

for (var i=0;i<3;i++) {
    jQuery('.delete-person').click(function() {   ... });
}

请勿多次附加事件。

利用事件冒泡的优势，不用担心为新创建的元素添加事件

jQuery(document).on("click", '.delete-person", function() {   ... });

最好将 document 替换为具有这些元素的元素。

如果你不想依赖冒泡，可以使用off()，但它会删除所有附加的事件。