load() API call function callback scope

I have been coding in JS for a while now, but somehow I always get a bit of a 'scratch head' type of problem. I think that I need to do some digging in, but in the meanwhile can someone help with this one?

So here is the problem: I am passing through the item (got by $(this)) into the callback function. This code does not work - when I really think it should. Since I have placed the $(this) into a variable (cloning the data?) and then passed it into the callback through a function, surely it should not loose the data? But it does, and horribly

// Allow hrefs with the class 'ajax' and a rel attribute set with a selector to load via ajax into that selector.
$(".ajax").unbind("click").click
(
    function(e)
    {

        var locationhint = $(this).attr("rel");            
        var $location = $(locationhint);
        $location.html ("<img src='images/blockloading.gif' />");            
        $location.load($(this).attr("href").replace("index.php", "ajax.php"), '', function($location){dready($location);}); 
        e.preventDefault();
    }
); 

Now that doesn't work.

This one works:

$(".ajax").unbind("click").click
(
    function(e)
    {             
        $("#myspecificdiv").load($(this).attr("href").replace("index.php", "ajax.php"), '', function(){dready($("#myspecificdiv"));}); 
        e.preventDefault();
    }
); 

I take it it's a scope problem, but I have also done this, which should work because it's exactly the same as the 'static' one above, essentially, because it's passing the text ID of the element. This one also breaks:.

$(".ajax").unbind("click").click
(
    function(e)
    {
        var locationhint = $(this).attr("rel");            
        var $location = $开发者_运维知识库(locationhint);
        $location.html ("<img src='images/blockloading.gif' />");  
        var locationid = "#" + $location.attr("id");
        $location.load($(this).attr("href").replace("index.php", "ajax.php"), '', function(locationid){dready($(locationid));});
        e.preventDefault();
    }
); 

The broken ones, when I console.log locationid, return the internal HTML of the target DIV. $location.attr("id"); can't return raw HTML when there is no call to it anywhere else surely? So it's scope I take it? But then how is it getting the internal HTML to spit out?

Any solutions?

Update: 12 seconds after I posted this it occurred to me that function($location){dready($location);} the internal function on the callback might automagically pass the AJAX call response through? But why?

You cannot do this function($location){dready($location);} but you do not need to since the outer scope has $location defined the callback func will understand this var without trying to pass it into the callback funcion so in this instance

function(){dready($location);}

will work.

Another way to conquor scoping issues is to use $.proxy. This allows you to set the this context under which the function will be called. jQuery.proxy( dready, $location ) returns a function that can be used as a callback which when invoked will call the method dready with this set to to $location.

e.g

$location.load($(this).attr("href").replace("index.php", "ajax.php"), '', jQuery.proxy( dready, $location );});