Question

I am trying to load an external page as a popup using jquery fadeIn() and fadeOut() functions.

This works fine when I use it to load a specific page in a div, but when I try to generalize the function, some element gets incremented in terms of 2 (i.e.) On first click, there’s no problem whereas on second click, the fading in happens twice. Can anyone help me wiht this ??

$(document).ready(function() {    
$('a').click(function() {    
var popupid = $(this).attr('rel');    
var url = $(this).attr('id');    
$('#' + popupid).load(url + '.html', function() {    
$('#' + popupid).fadeIn();    
$('body').append('<div id="fade"></div>');    
$('#fade').css({'opacity' : '0.65'}).fadeIn('fast');});    
});    
});    
$('.close').click(function() {    
$('#fade').fadeOut();    
$('popuprel1,popuprel2').fadeOut();    
});    
});    

I have two divs with id’s popuprel1 and popuprel2 where I am loading two external pages.

On giving some alerts, got to know that the clicks is getting incremented by power 2. Please help me how to reset the number of clicks once the function is over.

Answer 1

$('a').click(function() {

Maybe this line of code executes multiple times.

Try this:

$('a').unbind('click');
$('a').click(function() {

But this is just workaround.