javascript - 附加元素时维护 js

Question

我不是很有经验，希望有人能给我一些提示。

我正在尝试创建一个系统，可以将图像从保存容器传输到可操作容器，在其中可以调整图像大小并拖动图像。

我这里有一个操纵器:Fiddle Demo

我正在尝试让“点击进入/双击退出”系统在这里工作:Fiddle Demo

<div class="frame"></div>

<div class="inventory">
     <images>
</div>


$(".frame img")
    .draggable({
     containment: "parent",
    cursor: "move"
}).resizable({
    aspectRatio:1,
    containment: "parent",
    minHeight: 50,
    minWidth: 50
});


$('.inventory img').click(function(){ 
   $(this).appendTo(".frame");
 });
$('.frame img').dblclick(function(){
   $(this).appendTo(".inventory");
   $(this).removeClass('added');

});

我认为的主要问题是，一旦我追加了 div，js 就不会根据元素的排列刷新和应用。

任何帮助将不胜感激!

谢谢!

Answer 1

由于选择器的评估需要是动态的，因此您需要使用事件委托(delegate)

$('.inventory').on('click', 'img', function () {
    $(this).appendTo(".frame");
});
$('.frame').on('dblclick', 'img', function () {
    $(this).appendTo(".inventory");
    $(this).removeClass('added');
});

演示:Fiddle

注意:这不会处理可调整大小/可拖动的行为 - 当您将元素从一个容器移动到另一个容器时，您需要手动销毁/添加此行为