可调整大小的 jQuery UI 不适用于动态元素

Question

我通过管理仪表板在我的数据库中存储了一些resizable 和draggable div 标签，并将它们输出到我的主网站上。但问题是，resizable 不起作用，但我设法使 draggable 起作用。

这是来自数据库的 DOM：

<div data-type="input" data-card="serial_no" data-title="Serial No" class="card-data card-text card-content serial_no serial_no_content ui-draggable ui-draggable-handle ui-resizable"><span>Content for Serial No</span>
  <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
</div>

注意：我将 DOM 包裹在一个 div 标记中，其类为 .card

您可以看到 ui-resizable-handle 和 ui-resizable-* 类已经存在，我在将 DOM 输出到类名为 .card 的包装器中后尝试了以下操作。

$(function(){

   /**
    * Searching for .card children with the class name .ui-resizable-handle
    * and removing them
    **/
   $('.card').find('.ui-resizable-handle').each(function(i, v){
      $(v).remove();
   });


   /**
    * Iterating through .card again and making it's children draggable and resizable but this does not work.
    **/
   $('.card').children().each(function(i, v){
      if($(v).attr('data-type') == 'input'){
        $(v).draggable({containment: '.card-wrapper'}).resizable({
          handles: "n, e, s, w"
        });
      }
   });
});

执行此操作后，draggable 有效，但 resizable 无效。

请帮我解决这个问题。

提前致谢。

编辑： 这是Fiddle

Answer 1

我觉得奇怪的两件事，

1. 您正在删除子元素，然后尝试添加 resizable on 相同的。
2. 您正在同时绑定draggable 和resizable。 它不起作用，因为 draggable 的返回不是 元素的一个实例。

我已尝试在下面解决您的问题

$(function() {

  /**
   * Iterating through .card again and making it's children draggable and resizable but this does not work.
   **/
  $('.card').children().each(function(i, v) {
    if ($(v).attr('data-type') == 'input') {
      $(v).resizable({
        handles: "n, e, s, w"
      });
      $(v).draggable({
        containment: '.card-wrapper'
      })
    }
  });
});

.card {
  outline: solid 1px #aaa;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.card .card-text {
  position: absolute;
  left: 32%;
  border: solid 1px red;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<!-- div with the class .card is not dynamic but it's content is which is coming from database and i'm using PHP & MySQL for backend -->
<div class="card">
  <div data-type="input" data-card="serial_no" data-title="Serial No" class="card-data card-text card-content serial_no serial_no_content ui-draggable ui-draggable-handle ui-resizable"><span>Content for Serial No</span>
    <div class="ui-resizable-handle ui-resizable-n">foo</div>
    <div class="ui-resizable-handle ui-resizable-e">too</div>
    <div class="ui-resizable-handle ui-resizable-s">poo</div>
    <div class="ui-resizable-handle ui-resizable-w">choo</div>
  </div>
</div>

希望这会有所帮助。