Question

I’m having issues with my jQuery code.
When I click the button everything within the callback from my ajax.load() request seems to get actioned 4 times and I do not undestand why.

$('#requestDetails').click(function(event) {
    if($('form#forgotForm').length == 0){
        $('.innerBox').fadeTo('fast',0,function() {
            $('.innerBox').load('includes/ajax/forms.php?form=forgot',function(){
                enable_Forgot();
                clearWarnings();

                var $height = $('#loginContainer').outerHeight();
                $('#containerBox').animate({height:$height},'fast', function(){
                    $('.innerBox').fadeTo('fast',1);
                    //console.log('fade in Inner Block - Done');

                }); 

            });

        });
        event.stopPropagation();
    }
    event.stopPropagation();
});

UPDATE: thanks for your help guys – good spot.

my solution was to specify the parent element in the selector so that it would be specify only one of the elements with the same class.

            $('#loginContainer > .innerBox').fadeTo('fast',0,function() {
            $(this).load('includes/ajax/forms.php?form=forgot',function(){
                enable_Forgot();
                clearWarnings();
                //rest of code would follow...

This has fixed my issue as far as I can tell but I dont have my javaconsole at work to check my debug log.

Answer 1

The problem could be here…

$('.innerBox').fadeTo('fast',0,function() {

Do you by any chance have 4 elements with class=”innerBox” – if so, this line will cause everything wrapped within the function to occur once for each of these 4 boxes.

If that isn’t the problem, can you show us your HTML?

Update based on comments…

Yes – you have 2 class=”innerBox” elements, so your code flow is as follows…

$('.innerBox').fadeTo('fast',0,function() {
// "for each element with a class of innerBox (2) execute the following line"

    $('.innerBox').load('includes/ajax/forms.php?form=forgot',function(){
    // "for each element with a class of innerBox (2) perform a get and load the result"

So you have 2×2 ajax requests!

You might want to try…

$.get("includes/ajax/forms.php?form=forgot", function (data) {
    $(".innerBox").html(data);
});

Although I’m not sure why you would want to load the same thing into both inner boxes, so you might want to specifically select just one of them.