jquery - resizable not working after manipulating the DOM dynamically

Question

In my case, i have some div and img tags. I am applying draggable & resizable operations to only div elements.

In one of the features, we have "Remove element" feature which removes the selected element dynamically. Everything works, after the delete function call, i am doing to Event binding again so that resizable and draggable can work again. Draggable works fine but resizable does not..

I tried many combinations like calling resizable("destroy").resizable(), but nothing works. The run time generated html from the dom looks little weird.

The problem arises when i delete the image and the dragClass div is present on the page. Then the dragClass div does not become functional to be resizable. Pls suggest some ideas to fix this problem.

Here is the jsFiddle Demo link.

Here is the example:-

  <div id="ParentDIV" style="margin-left:200px; width:800px; height:500px; background:lightgray;">                    
           <div class="dragClass"><p>Drag me around!</p></div>
           <br /><br />
           <img class="dragImgClass" src="logo3.JPG" />
           <br /><br />
           <img class="dragImgClass" src="logo4.JPG" />
       </div>
        <br /><br />
        <input id="Btn4" type="button" onclick="deleteObj();" value="Remove Element" />

The js:-

  $(function () {
            BindEvtHandlers();         

        });      //End of DOM Ready

        function BindEvtHandlers() {            
            $(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                              .on("click", selectAction);

            $(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                           .resizable()
                           .on("dblclick", editAction)
                           .on("click", selectAction)
                           .on("blur", "textarea", blurAction); 
           }


        function selectAction() {
            var $this = $(this); //get current obj.                     

            if ($this.get(0).tagName == "IMG")
                $('body').data('CBO', $this.attr('src'));
            else
                $('body').data('CBO', $this.find('p').html());

            $('body').data('selObj', $this);    
            $this.fadeTo('slow', 0.3);             
           }

        function deleteObj() {
            var $selObj = $('body').data('selObj');
            alert($selObj.outerHtml());           

            var cont = $('#ParentDIV').html();
            cont = cont.replace($selObj.outerHtml(), "");
            $('#ParentDIV').html(cont);


            $(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                              .on("click", selectAction);

            $(".dragClass").resizable('destroy');
            $(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                           .resizable()
                           .on("dblclick", editAction)
                           .on("click", selectAction)
                           .on("blur", "textarea", blurAction); 
        }

Answer 1

I am sorry to be replying to a topic that is more than 10 years old, but I faced similar problem and found the solution, and I am replying here hoping that it would be helpful to others.

When you make an parent element resizable(), jQuery will add/append few <div> elements as children of that parent element depending upon the number of handles and directions you choose. If your use empty() or remove() methods on the parent element, these children <div> elements will also be removed. This is why the parent elements is no longer resizable after using empty() or remove() methods on it.

A simple solution is to not use a blanket empty() or remove() method on the parent element, but specifically remove the element with the parent element is no longer needed.

Answer 2

i found the easy solution to it. Inside the deleteObj fn, just stick one line after the first line and delete the rest of the code from the fn.

$selObj.remove(); 

This will remove element from the DOM tree rather than doing the string manipulation.