Load image into appended element

I am having a problem trying to load an image after an element has been appended as when an thumbnail has been clicked on, it will replace /t/ to /i/ then loads into an appended element by this code:

$('.main-image img').live('click', function ()
{
 var image_url = $(this).attr('src');
 var loadurl = image_url.replace(/\/t\//, '/i/');

 $('.container').slideUp('slow');

 $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function()
 {
  $('<img />').attr('src', loadurl).load(function()
  {
            $('.quick-view').empty();
   $(this).appendTo('.quick-view');
  });
 });

    // ignore this part - above is what needs helping with
 $('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px');
 $('.container:last').css('background', '#FFF');
 $('.container:last img').css('max-height', $(window).height() * 75 / 100)
});

However, it doesn't seem to work as it only shows the loading image, is there anything particular wrong with the code as it doesn't load the image into the appended element...

EDIT:

$('.main-image img').live('click', function ()
{
    var image_url = $(this).attr('src');
    var loadurl = image_url.replace(/\/t\//, '/i/');
    var self = $(this);

    $('.container').slideUp('slow');

    $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function()
    {
        $('<img />').attr('src', loadurl).live('load', function()
        {
            self.fadeOut('slow', function()
            {
                self.empty(function()
                {
                    self.appendTo('.quick-view');
                });
            });
        });
    });
    $('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px');
    $('.con开发者_C百科tainer:last').css('background', '#FFF');
    $('.container:last img').css('max-height', $(window).height() * 75 / 100)
});

I think this is what you're after:

$('.main-image img').live('click', function () {
    var loadurl = this.src.replace(/\/t\//, '/i/');
    $('.container').slideUp('slow');

    $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>');

    $('<img />').load(function() {
       var img = this;
       $('.quick-view img').fadeOut('slow', function() {
         $(this).replaceWith(img);
       });
    }).attr('src', loadurl);

    $('.quick-view').css('line-height', ($('.quick-view').closest('.container').height() - 25) + 'px');
    $('.container:last').css('background', '#FFF');
    $('.container:last img').css('max-height', $(window).height() * 75 / 100)
});

Basically you're passing a callback to numerous functions which don't accept a function. The above loads the image in the background, and when it's finished it fade out the loader image then replaces it with the loaded one.

give a class to the image or id and try like below

$('#imageId').load(function() {

});

As it is adding at run time , do you need to use jquery live ????

$('img').live('load', function ()
{
    //try live
});