jQuery & jqTouch - ajax.load problem

Question

I think my problem lies more in my approach and applies more to jquery, but something weird is happening here.

I'm using jQuery & jqTouch. My html is:

<div id="home" class="current">
    <div class="toolbar">
        <h1>Header</h1>
    </div>
    <ul class="rounded">
        <li class="arrow"><a href="#currentloc">Current Location</a></li>
    </ul>       
</div>
<div id="currentloc">
    <div class="toolbar">
        <h1>Nearby</h1>
    </div>
</div>

What I'm trying to do is when a user clicks the Current Location link, on pageAnimationEnd I'd like to load a page and append it to #currentloc. Here's my code:

$('#currentloc').bind('pageAnimationEnd', function(e, info){
    $(this).load('results.php');
});

As you can see, this will entirely replace the contents of #currentloc. I'm not sure how I append the content of results.php without replacing what's already there. I've looked at putting the ajax load request inside of append:

$(this).append(load('results.php'));

but that totally wasn't working...

Any idea what to do?

UPDATE

One thing I've tried which works but feels a little clumsy is

$('#currentloc').bind('pageAnimationEnd', function(e, info){
 $(this).append('<ul></ul>');  
 $(this).find('ul').load('results.php');
});

Feel like there's a better solution to this.

Answer 1

The load function in jquery replaces the content, so you must create another element if you wish to keep the current content. You can could make your code a little shorter if you remove the call to the find function.

$('#currentloc').bind('pageAnimationEnd', function(e, info){
   $(this).append($('<ul />').load('results.php'));   
});

or

$('#currentloc').bind('pageAnimationEnd', function(e, info){
   $('<ul />').load('results.php').appendTo(this);   
});