Question

This question is related to this question yesterday. Please see current jsfiddle here.

I’ve been able to get it working so that the clicked div scales and animates nicely. But I now have 2 other problems:

1. Once the clicked div has been scaled back to original size, the script won’t run when I click the same div again to repeat the action.

2. I’m not really happy with the jumpy rescaling/repositioning. I can’t seem to get it to work as smoothly. I guess I’d be okay with it as is, but I’d be a lot happier if it was as smooth as the initial scale/animation.

Please let me know if I need to be clearer.

Any assistance would be much appreciated! MTIA.

Answer 1

It won’t work a second time because you remove the click handler from it when making it not current anymore:

selectedBox.unbind('click');

That unbinds all click handlers from the div, including the one you hooked up in ready initially.

Four options:

1. Don’t unbind the main click, and use jQuery’s event “namespacing” for the second click event:

   $('.current').bind('click.current', function() {
   

   …and then when unbinding:

   selectedBox.unbind('click.current');
   

   Be sure to stop the event in the current click handler, so the main click handler isn’t run (jQuery makes sure handlers are run in reverse order of being hooked up, so you know the current handler will run before the main handler, cross-browser). Never mind, sorry, it’s the other way around: jQuery ensures they run in the order they were bound, not reverse order.

2. Use a named function for the current click event:

   $('.current').click(currentClick);
   function currentClick() {
   

   …and remove it specifically:

   selectedBox.unbind('click', currentClick);
   

   …and again, don’t remove the main handler.

3. Use delegate rather than click for the main (non-current) click:

   $('#content').delegate('.box', 'click', boxClickHandler);
   

   That hooks up the click event on the container of the boxes, not the boxes themselves, and then responds to clicks because they bubble.

   In your “current” click handler, be sure to cancel the click event so it doesn’t bubble up to the container.

   Here’s a fiddle with that change implemented. I also namedspaced the “current” click just to be friendly to any other code that might also need to know when a box is clicked.

4. Put the boxClickHandler back after removing the current click handler:

   selectedBox.unbind('click').click(boxClickHandler);
   

5. Use a single handler and branch within the handler depending on whether you see the “current” class on the box.

…or some combination of the above.

I like #5 the best.