Ajax request firing multiple times

[harryjcourt]

Hello,

I'm currently in the process of creating a website for a client. One of the pages on the website has a lot of content that is toggled in and out by a menu. The content is loaded using jQuery's load().

Everything is working fine, however the first time you click on the menu (and only the first time), the AJAX request is being sent up to 6 times. This is only on the first use of the menu, all subsequent clicks on the menu correctly only send the AJAX request once.

I have looked at my code a few times and can't see what may be causing this! If anyone has any ideas it would be highly appreciated.

The URL of the page can be found here:

http://demo.slickdesign.com.au/mauri...x.php/services

And the JS code controlling the functionality is shown below (which you can also access by viewing source on the above URL):

$(document).ready(function() {

$('#services .service').click(function() {
		var targetContent = $(this).attr('rel');
		$('#services .service').removeClass('active').filter(this).addClass('active');
		$('#services .column.first').children(':visible').fadeOut(350, function() {
			$('#services .column.first').html('<img class="ajax-loader" src="http://demo.slickdesign.com.au/mauricemeade/images/interface/loader.gif">');
			$('#services .column.first').load(targetContent, function() {
				$('#services .column.first .loaded-content').fadeIn();	
			});
		});
	});
});