jquery load() with progress image problem

I want to load remote content of parent div upon click of image. While waiting for the content to load I want to show a progress-image, now what's wrong with this code?

If i comment the row with preload image, everything works.

$(document).ready(function() {
  $("img.taskzoom").click(function() {
    $(this).parent().html('<img src="prog.png"/>');
    alert('alert does n\'t help');
    $(this).parent().load('test.php');
  })
});

test.php:

<?php sleep(3); echo 'server content';?>

//clarification//

WITH preload image, the preload image shows, but not remote content.

WO preload image, the remote c开发者_开发问答ontent shows up.

When you replace the HTML of the parent element, you detach the image that was clicked. The element exists as this within your handler function, but it is not attached to the DOM. When you call parent, therefore, there is no parent element to find, so the load call doesn't work.

If you want to overwrite the whole content of the parent element, you'll need to cache the parent element:

$(document).ready(function() {
  $("img.taskzoom").click(function() {
    var parent = $(this).parent();
    parent.html('<img src="prog.png"/>');
    alert('alert isn\'t necessary now');
    parent.load('test.php');
  })
});

If you don't want to overwrite the whole content, you'll need to do something different. It's hard to say exactly what without knowing what you want to do!

Maybe try something like this?:

$(document).ready(function() {
  $("img.taskzoom").click(function() {
    var $parent = $(this).parent();
    $parent.html('<img src="prog.png"/>');
    $(this).parent().load('test.php', function(response, status, xhr) {
       $parent.html(response);
    });  
  });
});