jQuery - using .prepend()

jQuery - using .prepend()

本文关键字:prepend using jQuery      更新时间:2023-09-26

我在我的项目中使用jQuery,在那里我遇到了一些.prepend()问题。请转到 http://qlimp.com 并使用此用户名/密码登录:虚拟/虚拟 然后单击链接转到信息设置。单击添加服务按钮 ->然后单击 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/,它正在工作(一次预置一个标签)。谁能告诉我我犯了什么错误?

谢谢!

只使用一个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来停止冒泡事件的执行。