Problem with data element

Problem with data element

I'm trying to get a small piece of functionality to work, but struggling so far. Here's the code.

function goToOutPage() {

    $('.click-reveal')
        .attr('href', $(this).data('url'))
        .attr('target', '_target');
}

The target attr is applied, but the data-url is not.  If I change $(this).data('url') for 'test' then this works.

The data tag exists, confirmed here.

<a class="click-reveal" href="/offers/2/Save%20%C2%A310%20off%20all%20return%20flights" data-url="/out/offer/2" target="_target">Go to Site </a>

I can also make this work perfectly when using a click function like this:

var gotoOutPage = function (e) {

    pd(e);

    var url = $(this).data('url');

    $(this).attr('href', url).attr('target', target);

    window.location = $(this).attr('href');
}

I can't see any errors in firebug and its probably something to do with the $(this).data('url') code but a bit stuck.

Any ideas?