JQuery После клонирования по id обращение к элементам клона
После клонирования по id происходит обращение к элементам клона, а не родителя
$("#div_id").clone(true).appendTo("#clone1").attr( "id", "Clone1"); А мне нужно в клоне только сохранить оригинал. При том я даже изменяю id главного элемента как видно из строки Что не так ? Или так и должно быть ? Может необходимо изменять id всех подэлементов клона ? А не предусмотрена ли в JQuery возможность копирования ? |
mirek,
true - уберите - тогда не будут копировацо события $("#div_id").clone().appendTo("#clone1").attr( "id", "Clone1"); |
Цитата:
Конкретно картинка записывается при помощи appendChild javascript-ом Я подумал, а что если не использовать метод clone JQuery, а просто копировать div при помощи innerHTML Тогда в последующем можно будет восстановить этот div с событиями из HTML ? |
Если бы вы сделали маленький запускаемый пример HTML, то это бы ответило на многие вопросы.
Я, к примеру, не понял проблемы. Цитата:
|
melky, Наверно тогда через исп-ть обратный вызов. $("#Y").replaceWith()
|
Пример очень простой
Но с использованием JQuery. Поэтому я думаю не заработает
<div id="clone" style="font-size:10px;"></div>
<div id="img_id">
<div id="ne">
<img id="main_img" src="" width="350" height="300" />
<div id="wrapper">
<div id="able">
</div>
</div>
</div>
$("#img_id").clone().appendTo("#clone");
После выполнения $("#img_id").clone().appendTo("#clone"); Инструкция document.getElementById("img_id").src = "src" присваивает путь к файлу клону, а не оригиналу Соответственно картинка отображается в div id="clone", а не div id="img_id" |
Цитата:
|
$("#img_id").clone().removeAttr("id").appendTo("#clone");
|
Цитата:
Я например сейчас попробовал еще делать приблизительно похожее Сразу же после appendTo изменял id всех элементов Сложности возникают при попытке восстановить сохраненный таким способом div с сохранением всех его свойств |
<div id="clone" style="font-size:10px;"></div>
<div id="img_id">
<div id="ne">
<img id="main_img" src="" width="350" height="300" />
<div id="wrapper">
<div id="able">
</div>
</div>
</div>
$(".img_id").clone().attr("id", "clone_image").appendTo("#clone");
document.getElementById("clone_i mage").src = "src"После клона появляется два элемента #img_id, соответственно document.getElementById("img_id") берет первый. |
$("#img_id").clone(true).appendTo($('#clone1')).attr("id", "clone");
Вот такой код нормально работает Теперь я пытаюсь изменить id всех элементов DOM при помощи такого алгоритма
$('#clone').children().each(function(){
$('#clone').append(this.id+='--->');
});
Но изменяется ID только второго элемента в клоне Фактически в результате клонирования из такого DOM
<div id="img_id">
<div id="ne">
<img id="main_img" src="" width="350" height="300" />
<div id="wrapper">
<div id="able">
</div>
</div>
</div>
Получается такой
<div id="clone">
<div id="clone--->">
<div id="ne">
<img id="main_img" src="" width="350" height="300" />
<div id="wrapper">
<div id="able">
</div>
</div>
</div>
</div>
То есть у клона появляется новый <div id="clone">, который становится оберткой прежнего DOM Также изменяется ID второго элемента на id="clone--->" Но почему не изменяются все ID ? И я предполагаю, что при восстановлении оригинала оберточный DIV с id="clone" станет лишним |
mirek,
:) А тьву обязательно клонировать внутрь этих жа блоков ? Если привязка к событиям не нужна -можно склонировать вне DOM |
Цитата:
То есть в дальнейшем необходимо полностью восстановить какое-то состояние редактора с положением всех картинок и т.д.. А главное с возможностью дальше изменять все картинки сохраненные на этапе, когда пользователь решил сохранить состояние |
mirek,
А смысл в клонировании - ведь есть исходник - зачем нужна копия ? Если нужны события кидайте ссылку на действующий код, иначе закавыряемся в неувязках, хотя сегодня всё одно не успеваю |
Цитата:
Или потом вновь вернуться к сохраненному Цитата:
А главная проблема в изменении ID всех элементов в клонированном DOM Я думаю если изменить все ID то все бы должно заработать правильно |
mirek,
Под событиями подразумевается не изменения/cостояние контента - оно сохраниться по любому, а привязка к событиям типо onblur onchange onclick ondblclick onfocus onkeydown onkeypress onload onmousedown onmousemove |
Цитата:
Но пока у меня это не получается Общая схема алгоритма вообще такая объект сохраняется в клон А оригинал стирается для того, что-б "холст" стал пригоден для работы Но если необходимо восстановить прежнюю работу то "холст" восстанавливается из клона Так вот на восстановленом таким образом холсте не работают такие возможности jquery ui как resizable draggable (перетаскивание) и т.д. Другие же возможности не зависящие от jquery ui. Это навешанные мною события сохранились и работают Но мне надо, что-бы такие возможности jquery ui как resizable draggable восстанавливались тоже Хотя сейчас у меня все верно восстановлено с восстановлением всех оригинальных id Смотрел исходный код до и после восстановления из клона Получается 1 в 1 |
mirek,
Попробуйте так <script type="text/javascript"> var Storage=[] var Storage[0]=$("#img_id").clone(true).remove(); //Тут Тест восстановления из Storage[0] исходника //.... </script> |
Да я вот попробовал еще проще.
Даже если не стирать "холст", а просто восстановить его из клона на тот же самый то все возможности jquery ui - resizable draggable перестают работать Стирать я пробовал кстати как методами remove так и detach |
То есть при этом ни один из элементов описанной структуры
<div id="img_id">
<div id="ne">
<img id="main_img" src="" width="350" height="300" />
<div id="wrapper">
<div id="able">
</div>
</div>
</div>
Не удалялся со страницы. В случае восстановления из клона весь DOM был просто перезаписан на точно такой же И draggable и resizable перестали работать |
То есть при этом ни один из элементов описанной структуры
<div id="img_id">
<div id="ne">
<img id="main_img" src="" width="350" height="300" />
<div id="wrapper">
<div id="able">
</div>
</div>
</div>
Не удалялся со страницы. В случае восстановления из клона весь DOM был просто перезаписан на точно такой же И draggable и resizable перестали работать |
mirek,
я тут глянул про resizable draggable - я не пользовался данным расширением, возможно кто более опытный подскажет |
| Часовой пояс GMT +3, время: 09:41. |