Jquery resizeable add image size problems

Question

I have a simple code that adds an image to #container when a button is clicked. The problem is that when I press the button first, the image size is not added properly. But when the button is pressed again, we get an added image with the correct image size. This does not happen if we remove resizable () from the equation.

Why the first click does not receive the correct image size. Code below:

<button id="test">add me</button>
<div id="container"></div>

<script type="text/javascript">
$('#test').live('click',function(){
    var elm = '<img src="http://www.navegabem.com/blog/wp-content/uploads/2009/04/firefox-icon.png" />'
    $(elm).appendTo('#container').resizable().parent().draggable();
});
</script>

Answer 1

Make it resizable when it is loaded:

$(elm).load(function(){$(this).resizable();}).appendTo('#container').parent().draggable();

If you do this before he doesn’t figure out what size the image will have, so the initial size of the resize is set to 0/0