Not allowing to push duplicate items into array

Question

Basically I'm pushing containers into an array, and once one has been pushed, I don't want to allow that same one to be pushed again.

Here is my JSfiddle: http://jsfiddle.net/9Dmcg/3/

Javascript:

$(document).ready(function(){

var favorites = [];
var counter = 0;

    $('.containers').on('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });


});

I need to find a way to work around that.

Answer 1

Unless there's more to that click event, you can use the .one() method in place of .on to get this functionality.

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').one('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });    

});

http://jsfiddle.net/9Dmcg/4/

Even if there were more to it, you could still use .one():

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').one('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);

        $(this).on("click",function(){
             alert("Favorite Added!");
        }).triggerHandler("click");

    });    

});

http://jsfiddle.net/9Dmcg/5/

Answer 2

Try to check for element id's I would say. Something like this:

$(document).ready(function(){

var favorites = [];
var counter = 0;

    $('.containers').bind('click', function(){
        var isAdded = false;
        for (var f = 0; f < favorites.length; f++) {
            console.log(favorites[f].id + "|" + this.id);
             if (favorites[f].id === this.id)
                 isAdded = true;
        }

        if (!isAdded)
            favorites.push($(this).clone()[0])


         console.log(favorites);
        $('.favorite').append(favorites);
    });


});

And here's working example -> http://jsfiddle.net/9Dmcg/7/

mz