jQuery each() not continuing code execution for first element if a second element was clicked?

Question

Sorry if the title is not clear enough, I have <a> elements with the same class when user clicks on each one the jquery code should run for each one alone, the problem is when clicking the first element and before it finishes running the whole code if I click a second element it leaves the first one incomplete and runs the code on the second one, it's supposed to work simultaneously (btw it's supposed to send data to a php file and it's working fine even if I click many elements by the classes are not working)

here's the code:

    jQuery(function($) {
        $('.anchor-tag-class').each(function() {
            $(this).click(function() {
                $this = $(this);
                var id = $this.attr('data-id');
                if ( $this.hasClass('on') ) {
                    $this.removeClass('on');
                    $this.addClass('loading');
                    $.post("process.php", { element_id: id, status: 'off' }, function(data) { $this.addClass('off').removeClass('loading'); } );
                } else {
                    $this.removeClass('off');
                    $this.addClass('loading');
                    $.post("process.php", { element_id: id, status: 'on' }, function(data) { $this.addClass('on').removeClass('loading'); } );
                }
            });
        });
    });

so what am I doing wrong ?

and thanks in advance.

Rory McCrossan · Accepted Answer · 2012-05-29 10:12:20Z

2

You don't need the each() in this case, as the code will only be run for the specific element which raised the event. You can also chain your functions hanging off the $this variable.

Try this:

$('.anchor-tag-class').click(function() {
    var $this = $(this);
    var id = $this.attr('data-id');
    if ( $this.hasClass('on') ) {
        $this.removeClass('on').addClass('loading');
        $.post("process.php", { element_id: id, status: 'off' }, function(data) { $this.addClass('off').removeClass('loading'); } );
    } 
    else {
        $this.removeClass('off').addClass('loading');
        $.post("process.php", { element_id: id, status: 'on' }, function(data) { $this.addClass('on').removeClass('loading'); } );
    }
});

answered May 29, 2012 at 10:12

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rory McCrossan Over a year ago

Note, I added var before the $this declaration to make sure it still has scope within your $.post callbacks.

Pierre Over a year ago

I'm not using the console, and thank you for cleaning up the code. the functionality is working fine as I said but the problem when clicking another element and the first on still has the loading class, the function(data) { $this.addClass('off').removeClass('loading'); } in the $.post() won't run for that element

Pierre Over a year ago

when I added var before $this it works now, thank you very much :)

Jeff Watkins · Accepted Answer · 2012-05-29 10:13:46Z

1

You have a $this variable, set to $(this)... Where is $this defined? If it is outside the scope of the function, that's your problem!

answered May 29, 2012 at 10:13

Jeff Watkins

6,35718 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery each() not continuing code execution for first element if a second element was clicked?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related