Question

I’m sure this question has already been asked, but I can’t found the good keyword to feed google with. I can’t even find a good title for my question.
I want to do this :

$(".selector").click(function() {
    $(this).css("background-color", "red");
    if (confirm("Do you want to do this ?") {
        // do this
    } else {
        $(this).css("background-color", "transparent");
    }
});

But the css change is fired only after I confirm. How can I fire it before the confirm (or during the confirm) ?

Thanks.

Answer 1

I’ll bet it’s just a simple matter of adding a delay (even just 0 milliseconds). That will ensure that the page repaints before the confirm message appears.

$(".selector").click(function() {
    $(this).css("background-color", "red");
    var _this = this;
    function confirmCode(){
        if (confirm("Do you want to do this ?") {
            // do this
        } else {
            $(_this).css("background-color", "transparent");
        }
    }
    setTimeout(function(){confirmCode()}, 0)
});

Edit: added complete code