Question

I am having trouble figuring out what is causing the click event to fire more than once in the webapp below. Please visit the url, click on any level [from Ground – 4], and then click on a unit.

http://plaza.foxqa.com.au/touch/index.html

That will bring up the Unit Details [price, images etc.]. The images in this page has a click event attached to them which basically enlarges the image. This event keeps stacking up. It will work fine when a unit is clicked for the first time.

Then it will fire twice for the second unit and three times for the third unit and so on. I tried to unbind the click event once the enlarged view is closed but still not working.

Any help would be appreciated.

Edit: Please test this in Google Chrome.

Edit 2: Steps that might help you figure out the problem sooner.

1. Open the components_draft.js in your console.
2. Add a breakpoint at line 687.
3. Click on a level on the building
4. Click on any green coloured unit [or lot].
5. Once the unit details are displayed, click on the unit plan image.
6. It gets enlarged.
7. Click anywhere on the image and it will be minimized.
8. Go back to step 4 by clicking the close icon.
9. Repeat 5,6,7.
10. Now, when the enalrged image is clicked, step through the functions in the console and you will see the click event looping twice for a single click.

I know following all of this is a pain but please take some time to analyze it.

Answer 1

Found the bug. If anyone comes across this situation where the jQuery click events are building up over time, the most likely culprit is the

jQuery.live()

Its doesn’t need to be nested under other click events.