可调整大小的jQuery UI在动态元素上不起作用

Question

I'm storing a few resizable and draggable div tags in my database through admin dashboard and outputting them on my main website. But the problem is, resizable does not work but I managed to make draggable work.

Here's my DOM coming from database:

<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>

NOTE: I wrapped above DOM in a div tag with a class .card

You can see ui-resizable-handle and ui-resizable-* classes are already there and I tried the following after outputting the DOM in a wrapper having a class name .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"
        });
      }
   });
});

After doing this, draggable works but resizable does not.

Please help me out to fix this.

Thanks in advance.

Edit: Here's the Fiddle

Answer 1

Two things I found odd,

1. You are removing child elements and later trying to add resizable on same.
2. You are binding draggable and resizable at the same time. It does not work since the return of the draggable is not an instance of the element.

I have tried to fix your issue abe below

 $(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> 

Hope this helps.