Question

When I run the following code, i only want the #overlay, #image + theNumber, and #close to be active so i am disabling $(‘.box’).click but once #close is clicked i want to re-enable the click on $(‘.box’) but I am unable to thus far. I’ve checked out other answers and wasn’t able to put it together. Thanks for the help!!

var handler = function() {

var theIDval = $(this).attr('id');
var theNumber = theIDval.replace('box','');

    $('.box').unbind('click');

    $('#overlay').show();
    $('#image' + theNumber).fadeIn();
    $('#close').fadeIn();

    $('#close').click( function () {
        $('#overlay').fadeOut();
        $('#image' + theNumber).fadeOut();
        $('#close').fadeOut();

        });
    };

$(document).ready( function() {
    $('.box').click(handler);
});

Answer 1

looks like all you’re missing is re-binding the .box click event in your #close click handler function

$('#close').click(function() {
    $('#overlay').fadeOut();
    $('#image' + theNumber).fadeOut();
    $('#close').fadeOut();
    $('.box').click(handler);
});

http://jsfiddle.net/pxfunc/gUP68/