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.

Answer 1

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'); } );
    }
});