jQuery单击在单击函数内多次触发

Question

我在此链接http://jsfiddle.net/rUbD8/1/

中添加了代码摘录

我在滑块名称的jsfiddle结果部分创建了以下3个手风琴滑块： 主页，关于和联系

当我单击Home滑块上的 Delete It 按钮时，它会写入console.log 3次 然后当我在About滑块上单击 Delete It 时，它会写入console.log 2次

有人可以告诉我它为什么这样做以及如何防止它多次发射？

Answer 1

这是因为每次添加滑块时，click函数都绑定到带有'deleteMe'类的元素，您可以尝试

jQuery('.deleteMe').unbind('click').click(function(e){}) ...

作为快速解决方案

Answer 2

这样做是因为每次添加新元素时都要对事件进行连线。

要解决此问题，请使用实时事件处理程序（监视新项目）将click事件处理程序移出目标位置：

http://jsfiddle.net/rUbD8/3/

jQuery('.slider_holder').on('click', '.deleteMe', function(e) {
    header = jQuery(e.target).parent().prev();
    container = jQuery(e.target).parent();

    console.log(e.target);

    header.fadeOut('slow',function(){
        jQuery(this).remove();
    });
    container.slideUp('normal',function(){
        jQuery(this).remove();
    });
});