jQuery -使用.prepend()

Question

我在我的项目中使用了jQuery，在那里，.prepend()遇到了一些问题。请转到http://qlimp.com并使用以下用户名/密码登录: dummy/dummy，然后单击链接，转到信息设置。单击添加服务按钮->，然后单击facebook图标 ->只需单击添加按钮

你会看到蓝色的facebook标签。当您再次执行该过程时，您将看到三个 facebook标记(同时在两个标记前加上)，而不是两个。就像在前面加了两倍的否定。以前的标签。为什么会这样呢？

以下是jQuery代码：

$("#facebook").click(function(){
    $("#facebook-info").fadeIn("slow");
    $("#facebook-button").click(function(){
        a = a+1;
        $("#service-sets").prepend('<div class="tag" id="'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del"></i></span></span></div>');
    });
});

$("#service-sets").on('click', '#facebook-del', function() {
    $("#facebook-tag").remove();
});

HTML

<div id="service-sets">
</div>

我刚刚用示例代码签入了jsfiddle http://jsfiddle.net/YVZH5/，它正在工作(同时在一个标签前加上一个标记)。有人能告诉我我犯了什么错吗？

谢谢!

Answer 1

只使用一个click事件。您正在为父元素和子元素执行此操作。

$("#facebook-button").click(function(){
    $("#facebook-info").fadeIn("slow");   
        a = a+1;
        $("#service-sets").prepend('<div class="tag" id="'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del"></i></span></span></div>');      
});

并确保，如果单击事件被限制到父和子div，则当您单击子div时，将停止父事件事件。您可以使用stopPropagation停止冒泡事件的执行。