不工作于动态div的jQuery UI可调整功能

Question

jquery中的可调整大小函数不是使用动态div，而是当我使静态(在HTML中表示复制和分页div代码)开始工作时。为什么？

$(function(){
  $("#textTemplate").draggable({
    zIndex: 2500,
    helper: 'clone',
  });

  $("#editorDesignView").droppable({
    accept: '#textTemplate',
    drop: function(event, ui) {
      var html = '<div id="" class="resize" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;" onclick="$(this).focus();">Add your text here.</p></div>';
      $(html).appendTo(this).hide().slideDown();
      var currentHtml = $("#editor").val();       
      $("#editor").val(currentHtml+html);
    }
  });

  $('#editorDesignView').sortable();

  $('#editorBlock div#editorDesignView div#sortable_elements').resizable();
});

Answer 1

对于动态创建的div，应该在drop完成之后初始化resize函数，如下所示：

$(function(){
  $("#textTemplate").draggable({
    zIndex: 2500,
        helper: 'clone',
  });
  $( "#editorDesignView" ).droppable({
    accept: '#textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" class="resize" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;" onclick="$(this).focus();">Add your text here.</p></div>';
  $(html).appendTo(this).hide().slideDown();
  var currentHtml = $("#editor").val();       
  $("#editor").val(currentHtml+html);
  $('#editorDesignView').sortable();
  $( '#editorBlock div#editorDesignView div.resize' ).resizable();
      }
    });
});

密码笔

Answer 2

静态HTML中的div使用可调整大小的属性激活。

('#editorBlock div#editorDesignView div#sortable_elements').resizable()；

在成功加载页面之后。

然后再过一段时间，您将创建一些新的div，但是这些新div将永远不会使用可调整大小的属性来激活。

的末尾重新激活新创建的div。

$("#editorDesignView").droppable({...})

通过添加.sortable() .resizeble()

在$("#editor").val(currentHtml+html);行下面(在本例中)