Run jquery image resizer after image is appended

I am using this jQuery plugin to re-size images. http://hirdet2.extra.hu/kepresize/ .

$(document).ready(function(){
            $('#content img').kepresize({maxWidth: 200,maxHeight: 150});
            ....
            ....
            $('#content').append('<img src="pathtofile"/>');
});

However, these images are only being appended after the document loads开发者_如何学Python, depending on the users actions. Therefore the appended images are not being re-sized.

I have had a play around with .live() but can't seem to get it right.

Any help would be much appreciated.

Call kepresize after you have appended the image.

If you are going to be dynamically appending many images, then perhaps resize each one before appending.

var img = $('<img src="pathtofile"/>').kepresize({maxWidth: 200,maxHeight: 150});
$('#content').append(img);

The simplest approach would be to call kepresize each time you add an image to the DOM.

I don't know if kepresize is idempotent, but if it is, you could simply call it on all IMG elements when a new one is added. Otherwise, separate the creation and addition of your IMG element and call it that way:

var newImage = $('<img src="pathtofile"/>');
newImage.kepresize({maxWidth: 200,maxHeight: 150});
$('#content').append(newImage);

This happen cause you are trying to Resize something that is not in the DOM yet!

the append() must be called before the resize function!

your code must look like this:

DEMO: http://jsbin.com/eraqo/2

$(function(){
  // this resize when page load the first time
 $('.thumb').kepresize({maxWidth: 100,maxHeight: 150});  
//this append the image on click event
  $('a#add').click(function () {
  $('#resizer').append('<img class="thumb" src="goodphotography.jpg" />');
//now you can resize the new image
    $('.thumb').kepresize({maxWidth: 100,maxHeight: 150});
  });
  });

Use .load() event.
Description: Bind an event handler to the "load" JavaScript event.

$('img').load(function(){
    $(this).kepresize({maxWidth: 200,maxHeight: 150});
});