Bug Tracker

Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#998 closed bug (invalid)

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 (358 bytes) - added by dohpaz 13 years ago.
This patch will add a condition to .pop() the last item out of the queue

Download all attachments as: .zip

Change History (2)

Changed 13 years ago by dohpaz

Attachment: jquery.js.patch added

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

comment:1 Changed 13 years ago by brandon

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.