Bug Tracker

#998 closed bug (invalid)

Opened February 24, 2007 07:33AM UTC

Closed February 25, 2007 05:05AM UTC

Last modified June 21, 2007 04:02AM UTC

Nested .click()'s cascades unwanted animations

Reported by: dohpaz Owned by:
Priority: minor Milestone: 1.1.2
Component: effects Version: 1.1.1
Keywords: fadeIn fadeOut fx animation queue Cc:
Blocked by: Blocking:
Description

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.

Attachments (1)
  • jquery.js.patch (0.3 KB) - added by dohpaz February 24, 2007 07:33AM UTC.

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

Change History (1)

Changed February 25, 2007 05:05AM UTC by brandon comment:1

resolution: → invalid
status: new → closed

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.