jQuery-cloned div does not respond to click event


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();
    // save .box position + size
    // maximize div

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

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

Use Event delegation for dynamically created class in DoM elements

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

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