how to make a jquery click event happen more than once

Question

disclaimer one: i am brand spanking new to jquery, and this my first post to SO.

disclaimer two: i have searched my question many different ways, and HAVE FOUND many detailed answers, and yet i still cannot get my jquery to work as i would like it to.

that said:

i am trying to create a mobile version of my website. (for reference, the desktop & tablet version is here: http://creative-servic.es )

what i need for the mobile version, is for the main portfolio images and the thumbnail gallery to switch places when the gallery-icon in the footer is clicked, and then when a thumb is clicked, they switch back again, and the portfolio image whose thumbnail was clicked is now visible at the top of the page. which all works (yay!)... but only once :(

in other words, once a thumbnail is selected, i can no longer get the gallery to activate via its icon in the footer.

i know this is a rather common problem, and has something to do with something no longer existing in the DOM after the event is requested. but please go easy on me with the lingo -- i am not even really sure what a DOM is in the first place, nor what binding is (or unbinding) for that matter, but these are some of the somewhat confusing terms that keep coming up in my research.

here is the mobile mockup in question: http://mnml.cc/ces/m

i have tried the .live, .on, .click, and .delegate functions to no avail.

any assistance in this matter would be greatly greatly appreciated!

many thanks and warmest regards, Dd.

Answer 1

Your page works now unless you click on one of the thumbnail images (after first clicking on the gallery icon). The reason looks like this: when your page loads, the div `gallery' has a width of 0, but has height and opacity. Then, in your click function you have:

$("#gallery a").on('click', function() {
    $(this).parent().hide();
});

This hides the gallery div (by reducing width, height and opacity to 0 = display:none - check the console and you'll see this happen). Finally, the click function bound to #gallery-icon only toggles the div width - it doesn't change the 0 height and 0 opacity. Try changing the above code to something like:

$("#gallery a").on('click', function() {
    $('#gallery').css('width', 0);
});

This should set it to its original state, and the `gallery-icon' click function should then be able to toggle the width of a visible div.

(You can animate the function as well, if you wish, to reverse the original click function.)