Why doesn't code inside .done or .fail work, but the code works perfectly outside ajax?

Question

For some reason all code inside .done() or .fail() doesn't seem to work.
console.log works though.. And console-debugger in Firefox shows the results as expected. Both the XHR log, and the response in the console from console.log(data)

EDIT
$(this)-callback works perfectly, and is not the problem here. No code other than console.log(); works inside .ajax. $('.view-more-btn).hide();` doesn't work either. But it works outside ajax.

$(function(){
    $(".view-more-btn").click(function(e) {
        e.preventDefault();
    /*  ajax request  */
        $.ajax({
            type: "GET",
            url: 'scripts/script.exe.php?ajax='+$(this).attr('href')
        })
        .done(function(data,statusText,jqXHR){
            console.log(data);
            $(this).closest('.product').css('border','1px solid red');  //  <-- doesn't work
        })
        .fail(function(){ 
            console.log('fail');
        });
    /**/
    })
});

The following code is almost identical. I've just moved the CSS click test to before the ajax-request.

$(function(){
    $(".view-more-btn").click(function(e) {
        e.preventDefault();
        $(this).closest('.product').css('border','1px solid red');  //  <-- does work
    /*  ajax request  */
        $.ajax({
            type: "GET",
            url: 'scripts/script.exe.php?ajax='+$(this).attr('href')
        })
        .done(function(data,statusText,jqXHR){
            console.log(data);
        })
        .fail(function(){ 
            console.log('fail');
        });
    /**/
    })
});

Since none of the elements respondes as expected, I created a short test:

$(this).closest('.product').css('border','1px solid red');

            <div class="product">
                <div class="thumbnail img"><img src="/assets/images/produkter/<?=$p['img_main']?>.png"></div>
                <div class="desc">
                    <h3><?=$p['name']?></h3>
                    <span class="info"></span>
                    <hr>
                    Størrelser: <?=$p['size']?>
                    <hr>
                    <span class="colors">Farger: <?php foreach($colors as $i): ?><span class="prod_color_icon-<?=$i?>"></span><?php endforeach; ?></span>
                    <hr>
                    Kvalitet: <?=$weight?>, <small><?=$extra?></small>
                    <hr>
                    <a class="view-more-btn" href="get-nw-product-details&id=<?=$p['id_nw']?>">Mer info</a>  <!--  HERE's the button  -->
                </div>
            </div>

Any suggestion to what I'm doing wrong?