jquery - resizable在动态操作DOM后不工作

nr7wwzry  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(131)

在我的例子中,我有一些div和img标签。我只对div元素应用可拖动和可调整大小的操作。
在其中一个功能中,我们有“删除元素”功能,可以动态删除选定的元素。一切正常,在delete函数调用之后,我再次对事件绑定进行操作,以便resizable和draggable可以再次工作。可拖动的工作正常,但resizable不..
我尝试了许多组合,比如调用resizable(“destroy”).resizable(),但都不起作用。运行时从dom生成的html看起来有点奇怪。
当我删除图像时,问题出现了,页面上存在dragClass div。那么dragClass div就不能调整大小。请提出一些想法来解决这个问题。
这里是**jsFiddle Demo**链接。
下面是一个例子:

<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); 
        }
kognpnkq

kognpnkq1#

我找到了一个简单的解决办法。在deleteObj fn中,只需在第一行之后插入一行,并从fn中删除其余代码。

$selObj.remove();

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

w1jd8yoj

w1jd8yoj2#

我很抱歉要回答一个超过10年的主题,但我遇到了类似的问题,并找到了解决方案,我在这里回答,希望能对其他人有所帮助。
当你创建一个父元素resizable()时,jQuery将根据你选择的句柄和方向的数量添加/追加一些<div>元素作为父元素的子元素。如果在父元素上使用empty()remove()方法,这些子<div>元素也将被删除。这就是为什么父元素在使用empty()remove()方法后不再可调整大小的原因。
一个简单的解决方案是不要在父元素上使用一个总括的empty()remove()方法,而是明确地删除不再需要父元素的元素。

相关问题