動的に要素を追加するときにJQueryのサイズ変更可能な問題

Question

OKこのスクリプトがあり、リンクがクリックされるたびにajax呼び出しがページに表示され、ajaxからhtml要素が取得され、mainCanvas要素に挿入され、それにドラッグとサイズ変更の機能を割り当てます。

ajax.php（AJAXから受け取ったHTMLの例。###### =インスタンスIDは、IDがインスタンスごとに異なるので、AJAXを介してそれに渡されます）

<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」機能内のすべての画像をドラッグしてサイズ変更可能なmakeを実行する例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; 
    } 
}