jquery Ajax: selector as function param doesn't get logged?

I don't have a clue why this does not work for me.

I'm calling a this on a linkclick!

$('.pagination a').live('click', function(e) {
    e.preventDefault();
    var page = $(this).attr("data-ajax-link");

    //get classname of container box that should be reloaded
    var box = $(this).parent().parent();

    ajaxLoad(box, page, false);
    console.log(box); //takes some time as well! WHY?

});

And here the function that's triggered.

function ajaxLoad(targetBox, loadUrl) {

    console.log('start');
    console.log($(targetBox));

    $.ajax({
        url: loadUrl,
        dataType: "html",
        success: function(html,status) {
            console.log('end');

The weird thing I don't get is that console.log('start') is logged immediately in my console but console.log($(targetBox)); is not appear in the console until the success of the ajax function comes back!

why is that? Any idea?

This is the HTML that that is triggering the function.

<div class="list wide">        
     <div class="pagination">
          <span>&lt;</span>
          <em>[1]</em>
          <a data-ajax-link="/ajax/render/project/my?page=2" r开发者_开发技巧el="next" href="/my/project/2">2</a>
          <a data-ajax-link="/ajax/render/project/my?page=2" rel="next" href="/my/project/2">&gt;</a>
     </div>
...

So the element I'm selecting with parent().parent() is the div.list. So actually .list should be logged immediately when clicking the link.

Works for me in this simple example:

http://jsfiddle.net/vmkcG/

Can you update to show the context of this? That is, show this in the context of the function where it's being used to assign to box?