Append entire jQuery object to html

Question

I want to clone some players inside my .shuffler div. Because I attached click-listeners to the .player divs I want to append the entire object instead of just their HTML.

When I loop through the code below I do get the correct result when logging playerClones[j] in the each loop but it doesn't append anything.

Any ideas on how to clone my players and append every player 25 times to my .shuffler. without losing the click listener?

this.amountOfDuplicates = 25;
var playerClones = [];
this.parentObject.find('.player').each(function () {
    playerClones.push(jQuery(this).clone());
});

for (var i = 0; i < this.amountOfDuplicates; i++) {
    for (var j = 0; j < playerClones.length; j++) {
        this.parentObject.find('.shuffler').append(playerClones[j]);
    }
}

Fiddle here!

Answer 1

Normally when you use $(this).clone() , everything of the object is cloned except the click listener.

It is better if you could declare a function like this and call it every time u clone the object.

attachClickToClone = function() {
   $('.player').on('click', function() {
       //to-do-function
   }
}

And call it like this.

for (var i = 0; i < this.amountOfDuplicates; i++) {
    for (var j = 0; j < playerClones.length; j++) {
        this.parentObject.find('.shuffler').append(playerClones[j]);
    }
}
attachClickToClone();