Проблема изменения размера JQuery при динамическом добавлении элементов

Question

хорошо, у меня есть этот скрипт, и он выполняет ajax-вызов страницы при каждом нажатии ссылки, получает элемент html из ajax, помещает его в элемент mainCanvas, затем назначает функции перетаскивания и изменения размера дляЭто.

(пример html, полученного из ajax. ###### = instanceID, передаваемый ему через ajax, поэтому идентификатор отличается для каждого экземпляра)

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>

проблема, с которой я сталкиваюсь, по какой-то причине, только последний элемент имеет возможность изменять размеры, все они по-прежнему перетаскиваемы, но изменение размера нарушается дляранее добавленные элементы, как только добавляется новый элемент.

Я хочу добавить несколько элементов и изменить их размер, а не только последний добавленный элемент.

Я подозреваю, чтоэто может иметь какое-то отношение к тому, как я добавляю html ответа на холст, но я не уверен.Я больше знаком со стандартным javascript, чем со вуду, который является JQuery, поэтому любая помощь будет принята с благодарностью.

вот код ниже, а здесь ссылка на работающий пример 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>

Answer 1

вы делаете ВСЕ изображения перетаскиваемыми и изменяющими размеры в функции «assignProperty».Вам просто нужно сделать это для нового элемента:

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;
    }
}