CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rnk
rnk

Reputation: 2204

jQuery - using .prepend()

I'm using jQuery in my project, where I got some problems with .prepend(). Please go to http://qlimp.com and login using this username/password: dummy/dummy Then click the link Go to Information settings. Click the add service button -> then click facebook icon -> just click Add button

You will see the blue facebook tag. When you do that process once again, then you will see three facebook tags(prepending two tags at once) instead of two. It's like prepending twice the no. of previous tags. Why is it so?

Here is the jQuery code:

$("#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>

I just checked in jsfiddle http://jsfiddle.net/YVZH5/ with the sample code and it is working(prepending one tag at once). Could anyone tell me the mistake I've done?

Thanks!

Upvotes: 0

Views: 189

Answers (1)

Shyju
Shyju

Reputation: 218902

Use only one click event. You are doing it for the parent and child element.

$("#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>');      
});

And make sure, If you have the click event bounded to the parent and child div, when you click on child div you are stopping the parent events event. you may use stopPropagation to stop the bubbling event execution.

Upvotes: 1

Related Questions