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

来源

2012-06-11 Karan

我找到了最好的解决方案。在deleteObj fn中，只需在第一行后面添加一行，并从fn中删除其余的代码。 $ selObj.remove（）;这会从DOM树中移除元素而不是字符串操作。 – Karan

我找到了简单的解决方案给它。在deleteObj fn中，只需在第一行后面添加一行，并从fn中删除其余的代码。

$selObj.remove();

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

来源

2012-06-12 12:03:11 Karan

jquery - 可调整大小后不能动态操作DOM动态

回答

相关问题