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

[Anonymous]

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

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

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

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

Вот ссылка на демонстрацию jsFiddle.

Вот пример:-

Перетащите меня!







JS:-
$(function () { BindEvtHandlers(); }); //Конец готовности DOM функция BindEvtHandlers() { $(".dragImgClass").draggable({ задержка: 100, сдерживание: "#ParentDIV", прокрутка: false }) .on("клик", selectAction); $(".dragClass").draggable({ задержка: 100, сдерживание: "#ParentDIV", прокрутка: false }) .изменяемый размер() .on("dblclick", editAction) .on("клик", выберитеДействие) .on("размытие", "текстовая область", BlurAction); } функция selectAction() { вар $это = $(это); //получить текущий объект. if ($this.get(0).tagName == "IMG") $('body').data('CBO', $this.attr('src')); еще $('body').data('CBO', $this.find('p').html()); $('body').data('selObj', $this); $this.fadeTo('медленно', 0,3); } функция deleteObj() { вар $selObj = $('body').data('selObj'); Предупреждение ($ selObj.outerHtml ()); var cont = $('#ParentDIV').html(); cont = cont.replace($selObj.outerHtml(), ""); $('#ParentDIV').html(продолжение); $(".dragImgClass").draggable({ задержка: 100, сдерживание: "#ParentDIV", прокрутка: false }) .on("клик", selectAction); $(".dragClass").resizable('уничтожить'); $(".dragClass").draggable({ задержка: 100, сдерживание: "#ParentDIV", прокрутка: false }) .изменяемый размер() .on("dblclick", editAction) .on("клик", выберитеДействие) .on("размытие", "текстовая область", BlurAction); }