jquery resizable append image size problem

Question

I have the simple code below which appends an image to #container when button is clicked. The problem is when i first click on the button, image size is not properly appended. But when button is clicked again then we get the appended image with correct image size. This doesn't happen if we remove resizable() from the equation.

Why is the first click not getting the proper 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's loaded:

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

If you do it before it's not clear what size the image will have, so the initial size of the resizable is set to 0/0