可调整大小的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的div标签中。

您可以看到ui-resizable-handle和ui-resizable-*类已经在那里，在具有类名.card的包装器中输出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不可。

请帮我解决此问题。

提前致谢。

编辑：这是小提琴

Answer 1

我发现有两件事很奇怪，

1. 您要删除子元素，然后尝试在其上添加resizable 。
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> 

希望这可以帮助。