Question

I have an array of jQuery objects that I built and which have events attached to them.

var obs = [];
for(var i=0;i<100;i++) {
  var j = jQuery('<div></div>');
  j.click(function() { console.log('Clicked ' + i); });
  obs.push(j);
}

My HTML is:

<div id="replaceme"></div>

How do I replace the div on the page with all the jQuery objects in my array? I don’t want to concatenate their HTML because I want to preserve the event handlers.

Answer 1

You can replace an element with an array of jQuery elements by doing this:

$(theElement).replaceWith(theArryaOfjQueryElements);

In your case, this is:

$('#replaceme').replaceWith(objs);

See the jQuery.replaceWith() method.

---

BTW you have an error here:

j.click(function() { console.log('Clicked ' + i); });

This will always print Clicked 100. The reason is that your function closes a reference to i, not to it’s value. So if i is modified before this function is called, the function will see the new value of i.

You should do this instead:

 (function(i) {
     j.click(function() { console.log('Clicked ' + i); });
 }(i));