Nested .click()'s cascades unwanted animations

[dohpaz]

First off, I'd like to extend my gratitude to the development team and all of the contributers who have made the easiest-to-use Javascript framework that I have seen. Great job! :)

I do not know if this problem affects anything other than fadeIn/fadeOut, as these two methods are the ones I was working with when I discovered this problem. It seems that if I have a .click() on one DOM Element inside of another .click() on another DOM Element, using fadeIn/fadeOut more than twice will cause the previous calls to run in succession with every new click.

I have taken the liberty of creating as simple a proof of concept as I could, seeing as I just started using jQuery recently. It can be found at  http://dohpaz.mine.nu/jquery/queue.php. It demonstrates both the broken state, and the fixed state, and very briefly shows how to fix the problem.

To replicate my problem, simply click on the 'Show Problem' link to pull up an overlay. Click anywhere on the overlay to remove it, and then repeat the process any number of times to see the problem "grow".

To "fix" the problem, click on the "Fix jQuery" link and repeat the above steps.

I am also attaching a patch that I am using that -- as far as I can tell -- fixes this problem. Please advise if there is a better, or more preferred, way to fix this. As a side note, this also seems to fix a problem with queuing up multiple animations before they are ran.

[dohpaz]

This patch will add a condition to .pop() the last item out of the queue

[brandon]

Hey dopaz,

jQuery is only doing what you are telling it to do. You are adding another handler to the click event of the #overlay each time you click the #link. I've taken the liberty of rewriting your JavaScript. Notice that jQuery normalizes the opacity CSS property and that the .css() method can take a hash of property value pairs.

$(document).ready(function () {
	var overlay = $('<div id="overlay"></div>').appendTo('body').css({
		display: 'none',
		position: 'absolute',
		backgroundColor: '#000',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0,
		width: $.browser.msie ? document.body.clientWidth : window.innerWidth,
		height: $.browser.msie ? document.body.clientHeight : window.innerHeight,
		zIndex: 8888,
		opacity: 0.6
	}).bind('click', function() {
		$(this).fadeOut('slow');
	});
	
	$('#link').bind('click', function() {
		overlay.fadeIn('slow');
		return false;
	});
});

If you needed to create the #overlay div only after clicking on the link you can do so by using your code and just adding the event handler a the same time you create it, so that you are only adding one handler method for the click.