当动态添加元素时，JQuery可调整大小的问题

Question

好了，所以我有了这个脚本，它的作用是每次单击链接时都会对页面进行ajax调用，从ajax获取html元素将其放入mainCanvas元素中，然后为其分配拖动和调整大小功能。

（HTML代码AJAX收到的一个例子。###### =的实例ID被经由AJAX传递到它，因此ID是对每个实例不同）

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的巫术，所以任何帮助将不胜感激。

这里是下面的代码，这里是“assignProperty”功能来运行例子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

一个链接，你让所有图像拖动和调整大小。 你只需要为新的元素做到这一点：

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