Question

$(document).ready(function () {
    $('.raj').click(function () {
        if (!$(this).hasClass('already')) {

            $('.infos').html('');

            $('.infos').hide("fast");

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "ggg/hhh/rrr.php",
                success: function (msg) {
                    $('.infos').html(msg['ats']);
                    arr = msg['valid'];
                }
            });

            $('.infos').show("slow");

            if (arr == 1) {
                $(this).css("cursor", "default");
                $(this).addClass('already');
                $(this).animate({
                    opacity: 0.1
                }, 1000);
            }
        }
    })
})

When I click an element with class raj (it’s an image), nothing happens. Only once it is clicked a second time does my event seem to fire. Why is this happening?

edit:
this part is f*cked up:

if(arr == 1)
{
    $(this).css("cursor", "default");
    $(this).addClass('already');
    $(this).animate({
        opacity: 0.1
    }, 1000);
}

But msg['valid'] is really always 1, so I do not get it.

Answer 1

I am wondering shouldn’t it be like this?

$(document).ready(function() { 
    $('.raj').click(function(){
        var thisObj = $(this);
        if(!$(this).hasClass('already'))
        {
            $('.infos').html('');
            $('.infos').hide("fast");
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "ggg/hhh/rrr.php",
                success: function(msg) {
                    $('.infos').html(msg['ats']);
                    arr = msg['valid'];
                    $('.infos').show("slow");

                    if(arr == 1) {
                        thisObj.css("cursor", "default");
                        thisObj.addClass('already');
                        thisObj.animate({
                            opacity: 0.1
                        }, 1000);
                    }
                }
            });         

        }
    })            
})

It seems like that because of the somehow hard to read indention it was misplaced.

Edit:

Additional info: The ajax call is asynchronous. That means, that arr is not set to 1 the first time, but the second time it is because the callback was triggered already (my only explanation for this)