删除元素后，单击处理程序仍然存在，并多次执行其操作

Question

我正在以这种方式动态添加带按钮的自定义组件

function showPopup(){
var comp = '<div id="alert"><input type="button" id="proceed"><input type="button" id="close"></div>';

$('#body').append(comp);

}

对于这些按钮，我有像这样的处理程序

$('#close').live('click',function(){
$(this).parent().remove();
});

$('#proceed').live('click',function(){
//ajax-call
});

现在的问题是，当我调用该函数n次并关闭它时，当我现在继续执行n ajax调用时。 对此有何解决方案？ 谢谢

Answer 1

您添加的多个元素具有相同的id，这是无效的标记。当将事件委托给正确的元素时，这将导致jQuery出现问题。查询ID时，jQuery只匹配一个元素 - 请参阅Does duplicate id's screw up jquery selectors?

此外，this demo似乎在Chrome 14中对我有用。

Answer 2

很难确定，因为你没有在上下文中进行live调用，但我认为对live的调用是在一些被多次调用的代码中。如果是这样，这就是问题所在。 live只应为每个元素调用一次。然后，live将自动应用于与选择器匹配的所有项目。如果多次调用它，则每次都会附加另一个处理程序。