jquery - 动态操作 DOM 后调整大小不起作用

Question

就我而言，我有一些 div 和 img 标签。我仅对 div 元素应用可拖动和可调整大小的操作。

在其中一项功能中，我们有“删除元素”功能，可以动态删除所选元素。一切正常，在删除函数调用之后，我再次进行事件绑定，以便可调整大小和可拖动可以再次工作。可拖动工作正常，但可调整大小却不行..

我尝试了很多组合，例如调用 ressized("destroy").ressized()，但没有任何效果。运行时从 dom 生成的 html 看起来有点奇怪。

当我删除图像并且 DragClass div 出现在页面上时，就会出现问题。那么，dragClass div 就无法调整大小了。请提出一些想法来解决这个问题。

这里是 jsFiddle 演示 链接。

这是示例：-

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

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

我找到了简单的解决方案。在deleteObj fn 中，只需在第一行后面粘贴一行，然后从fn 中删除其余代码。

$selObj.remove(); 

这将从 DOM 树中删除元素，而不是进行字符串操作。

Answer 2

我很抱歉回复一个10多年前的话题，但我遇到了类似的问题并找到了解决方案，我在这里回复希望对其他人有帮助。

当您创建父元素

resizable()

时，jQuery 将根据您选择的句柄数量和方向添加/附加一些

<div>

元素作为该父元素的子元素。如果您在父元素上使用

empty()

或

remove()

方法，这些子

<div>

元素也将被删除。这就是为什么在使用

empty()

或

remove()

方法后父元素不再可调整大小。

一个简单的解决方案是不在父元素上使用毯子

empty()

或

remove()

方法，但不再需要专门删除带有父元素的元素。