Bind, Unbind Then Rebind Click Function

There are 4 boxes initially of equal sizes.When user clicks on any box it enlarges to the big box with content to the height and width of parent div and hide other siblings.On enla

Solution 1:

First, instead of .bind() and .unbind() I would use .off() and .on(). Check out What's the difference between jQuery.bind() and jQuery.on()? for more information.

Also any time you unbind or use off('click') on an event, you cant just use bind('click') or on('click') and expect to get the event back to normal. You would have to re-declare the event, in your case, the function in the line $(".box").click(function(){...}.

$(function(){
var $currentBox = false;;
var open = false;
var origHeight = $('.box').innerHeight() + 'px';
var origWidth = $('.box').innerWidth() + 'px';

$(".clsbtn").click(function(){
    $(".box").animate({
        "height": origHeight,
        "width": origWidth
    },800);

    $(".box").show();
        $(".box-container").show();
        $(".box-content").hide();
        $(".box").on("click");
    });

    functionactivate() {//change hereif (open) {
            $currentBox = false;
            $(this).animate({
                "height": origHeight,
                "width": origWidth
            },800);

            $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            open = false;

            $(".box").on("click",activate());//change here
        } else {
            $currentBox = $(this);
            var width = $('.boxes').innerWidth() + 'px',
            height = $('.boxes').innerHeight() + 'px';
            $(this).animate({
                "height": height,
                 "width": width
            },800);

            $(this).find(".box-container").hide();
            $(this).find(".box-content").show();

            $(".box").not(this).hide();
            open = true;
            $(".box").off("click");//change here
        }
    });

 $(".box").on("click",activate());//change here
});


});