JQuery resizable problem when dynamically adding elements

ok so i have this script, and what it does is makes an ajax call to a page every time the link is clicked, gets the html element from the ajax puts it into the mainCanvas element, then assign drag and resize features to it.

(example of html recieved from ajax. ###### = the instanceID being passed to it via ajax so the ID is different for each instance)

ajax.php

<div id="Image_######" style=" width:55px; height:55px; position: absolute;">
    <img class="Image_######" alt="" title="" src="http://www.imagemagick.org/Usage/thumbnails/hatching_orig.jpg" style="width: 100%; height: 100%;" />
</div>

the problem i am having with this is for some reason only the last element has the abbility to resize, they are all still draggable, but resize is broken for previously added elements as soon as the new element is added.

What i want to开发者_运维知识库 do is be able to add multiple elements and resize them all not just the last element added.

i suspect that it may have something to do with how I am appending the response html to the canvas, but I'm not sure. I'm more familiar with standard javascript than i am with the voodoo that is JQuery so any help would be much appreciated.

here is the code below, and here is a link to a running example http://sheac.com/resize-problem/

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="media/css/_library/jquery/ui-lightness/jquery-ui-1.8.5.custom.css">

<script type="text/javascript" src="media/js/_library/jquery/jquery-1.4.2.js"></script> <!-- jQuery Base -->
<script type="text/javascript" src="media/js/_library/jquery/jquery-ui-1.8.5.custom.js"></script> <!-- jQuery User-Interface Base -->
<script type="text/javascript" src="media/js/_library/jquery/jquery.ui.resizable.js"></script>


<a href="#" onclick="getInstance();return false;">create new instance</a>
<br /><br />
<div id="mainCanvas" style="border: 1px solid #CCC; width: 1000px; height: 500px;"></div>


<script type="text/javascript" language="javascript">
//<![CDATA[
    var instanceID = 1000;
    var properties = ["draggable", "resizableImage"];


    function getInstance(){
        var instanceID = getNextInstanceID();
        $.get("ajax.php", {instanceID: instanceID},
            function(response){
                document.getElementById("mainCanvas").innerHTML += response;
                runProperties(instanceID);
            }           
        );
    }   

    function getNextInstanceID() {
        var iid = instanceID;
        instanceID++;
        return iid;
    }

    function runProperties(instanceID) {
        if (properties != undefined) {
            for (var t in properties) {
                assignProperty(properties[t], instanceID);
            }
        }
    }

    function assignProperty(property, instanceID) {
        switch(property) {
            case "draggable": 
                $("#Image_"+instanceID).addClass(property);
                $(function() {
                    $("." + property).draggable({
                        grid: [ 16, 16 ],
                        snap: false,
                        containment: "#mainCanvas",
                        scroll: false
                    });
                });
                break;
            case "resizableImage": 
                $("#Image_"+instanceID).addClass(property);
                $(function() {
                    $("." + property).resizable({
                        grid: [ 16, 16 ],
                        minWidth: 32,
                        maxWidth: 208,
                        minHeight: 32,
                        maxHeight: 208,
                        aspectRatio: 1/1
                    });
                });
                break;
        }
    }   
//]]>
</script>

---

you make ALL images draggable and resizable in "assignProperty" function. You just need to do this for new element:

function assignProperty(property, instanceID) {
    switch(property) {
        case "draggable": 
            $("#Image_"+instanceID).draggable({
                    grid: [ 16, 16 ],
                    snap: false,
                    containment: "#mainCanvas",
                    scroll: false
            });
            break;
        case "resizableImage": 
            $("#Image_"+instanceID).resizable({
                    grid: [ 16, 16 ],
                    minWidth: 32,
                    maxWidth: 208,
                    minHeight: 32,
                    maxHeight: 208,
                    aspectRatio: 1/1
            });
            break;
    }
}