jquery resizable append image size problem

问题

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>

回答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

来源：https://stackoverflow.com/questions/4858542/jquery-resizable-append-image-size-problem