Turning on and off a click event

64 Views Asked by At

So I'm trying to make a photo gallery where: 1.If you click on one of the photos there's a pop up 2.But you cannot click on any photos again until you close the pop up.

I've already messed around with click events and turning them on and off. Right now I have it working so that when I click a photo the pop up comes and I can't click any of the photos. However I'm having trouble turning the click function back after I click close.

$("#th1").click(function() {
    $("#dropdown").animate({
        top: "+=400"
    }, 500);
    //fix the pop up so it won't scroll
    $("#dropdown").addClass("fixed");
    //prevent clicking again
    $("#th1,#th2,#th3,#th4,#th5,#th6").off('click');
});

//close the pop up
$('#closedPopUp').click(function(event) {
    //prevent the default functionality
    event.preventDefault();
    //move the pop up back off the screen
    $("#dropdown").css("top", "-250px");
    //turn clicking on again (this part doesn't work)
    $("#th1,#th2,#th3,#th4,#th5,#th6").on('click');
});
1

There are 1 best solutions below

0
john Smith On

Your problem is here

$("#th1,#th2,#th3,#th4,#th5,#th6").on('click');

this does literally nothing, because there is no argument what to do on click.

You can assign your function to a variable to make it work:

var clickFunction = function() {
    // ...
    //prevent clicking again
    $("#th1,#th2,#th3,#th4,#th5,#th6").off('click');
}

$("#th1").click(clickFunction);

//close the pop up
$('#closedPopUp').click(function(event) {
    // ...
    $("#th1,#th2,#th3,#th4,#th5,#th6").on('click', clickFunction);
});