jquery - изменяемый размер не работает после динамического управления DOM

Question

В моем случае у меня есть некоторые теги div и img. Я применяю операции перетаскивания и изменения размера только к элементам div.

В одной из функций у нас есть функция "Удалить элемент", которая динамически удаляет выбранный элемент. Все работает, после вызова функции удаления я снова выполняю привязку к событию, чтобы можно было снова работать с изменяемым размером и перетаскиванием. Draggable работает отлично, но изменяемый размер не..

Я пробовал много комбинаций, таких как вызов resizable("destroy"). Resizable(), но ничего не работает. Время выполнения, сгенерированное html из dom выглядит немного странно.

Проблема возникает, когда я удаляю изображение, и div-класс dragClass присутствует на странице. Тогда div dragClass не становится функциональным, чтобы быть изменяемым. Просьба предложить несколько идей, чтобы решить эту проблему.

Вот ссылка на демоверсию 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 лет, но я столкнулся с аналогичной проблемой и нашел решение, и отвечаю здесь, надеясь, что это будет полезно другим.

Когда вы создаете родительский элемент, jQuery добавит/добавит несколько элементов в качестве дочерних элементов этого родительского элемента в зависимости от количества выбранных вами дескрипторов и направлений. Если вы используете методы родительского элемента, эти дочерние элементыэлементы также будут удалены. Вот почему родительские элементы больше не могут быть изменены после использования методов или.

Простое решение — не использовать одеяло.илиметод на родительском элементе, но специально удалять элемент с родительским элементом больше не нужно.