jQuery-cloned div not responding to click event

Question

The goal is to expand a div to cover the whole screen without destroying the layout.

My current solution looks basically like this:

$( ".box" ).click(function() {
    copy = $(this).clone();
    copy.addClass("box-active");
    // save .box position + size     
    // maximize div
}

$( ".box-active" ).click(function() {
    // minimize div to saved .box position + size
    $(this).remove();
}

But the cloned divs will not respond to click events. Is there a way to work around that?

Full code: http://codepen.io/deuxtan/pen/oXQpRy

Answer 1

Use Event delegation for dynamically created class in DoM elements

$(".container").on('click', '.box-active', function() {
  if(isFullscreen){ 
    d.width = "100px";
    d.height = "100px";            
    d.top = 0;            
    d.left = 0; 

    $(this).animate(d, duration);
    isFullscreen = false;
  }
});

Answer 2

You need to use .on for dynamically added elements.

$( ".container").on("click", ".box-active", function() {
    // ... minimize div ...
    $(this).remove();
});