jquery - 可调整大小后不能动态操作DOM动态
问题描述:
在我的情况下,我有一些div和img标记。我正在将可拖动的可调整大小的操作应用于div元素。jquery - 可调整大小后不能动态操作DOM动态
在其中一个功能中,我们有“删除元素”功能,可以动态删除所选元素。一切正常,删除函数调用后,我正在做的事件绑定再次,以便可调整大小和可拖动可以再次工作。 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);
}
答
我找到了简单的解决方案给它。在deleteObj fn中,只需在第一行后面添加一行,并从fn中删除其余的代码。
$selObj.remove();
这将从DOM树中移除元素而不是进行字符串操作。
我找到了最好的解决方案。在deleteObj fn中,只需在第一行后面添加一行,并从fn中删除其余的代码。 $ selObj.remove();这会从DOM树中移除元素而不是字符串操作。 – Karan