Вход

Просмотр полной версии : JQuery После клонирования по id обращение к элементам клона


mirek
06.06.2012, 15:30
После клонирования по id происходит обращение к элементам клона, а не родителя

$("#div_id").clone(true).appendTo("#clone1").attr("id", "Clone1");

А мне нужно в клоне только сохранить оригинал.

При том я даже изменяю id главного элемента как видно из строки

Что не так ? Или так и должно быть ?


Может необходимо изменять id всех подэлементов клона ?

А не предусмотрена ли в JQuery возможность копирования ?

Deff
06.06.2012, 15:42
mirek,
true - уберите - тогда не будут копировацо события
$("#div_id").clone().appendTo("#clone1").attr( "id", "Clone1");

mirek
06.06.2012, 15:56
true - уберите
Я убрал true. Но все равно тогда при записывании картинки по определенному id происходит ее запись в клон, а не оригинал

Конкретно картинка записывается при помощи appendChild javascript-ом

Я подумал, а что если не использовать метод clone JQuery, а просто копировать div при помощи innerHTML

Тогда в последующем можно будет восстановить этот div с событиями из HTML ?

melky
06.06.2012, 16:20
Если бы вы сделали маленький запускаемый пример HTML, то это бы ответило на многие вопросы.

Я, к примеру, не понял проблемы.

Тогда в последующем можно будет восстановить этот div с событиями из HTML ?
нет.

Deff
06.06.2012, 16:24
melky, Наверно тогда через исп-ть обратный вызов. $("#Y").replaceWith()

mirek
06.06.2012, 19:55
Пример очень простой
Но с использованием 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"

Deff
06.06.2012, 20:09
Инструкция document.getElementById("img_id").src = "src" присваивает путь к файлу клону, а не оригиналу
:yes: Нарисуйте инструкцию и HTML исходника для clone - может стоить менять id для img и нафига переходить из jQuery в чистый ява; и почему не делать через класс img(не через id) на parent() (* или parens()

melky
06.06.2012, 20:15
$("#img_id").clone().removeAttr("id").appendTo("#clone");

mirek
06.06.2012, 22:37
$("#img_id").clone().removeAttr("id").appendTo("#clone");

Проблема в том, что в дальнейшем требуется восстановление оригинала из клона

Я например сейчас попробовал еще делать приблизительно похожее

Сразу же после appendTo изменял id всех элементов

Сложности возникают при попытке восстановить сохраненный таким способом div с сохранением всех его свойств

beard
07.06.2012, 01:28
<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_image").src = "src"

После клона появляется два элемента #img_id, соответственно document.getElementById("img_id") берет первый.

mirek
07.06.2012, 01:42
$("#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" станет лишним

Deff
07.06.2012, 01:53
mirek,
:) А тьву обязательно клонировать внутрь этих жа блоков ?

Если привязка к событиям не нужна -можно склонировать вне DOM

mirek
07.06.2012, 01:57
Если привязка к событиям не нужна
Вот именно, что нужна. DIV, который я клонирую фактически содержит в себе мини редактор в котором можно менять картинки и т.д.

То есть в дальнейшем необходимо полностью восстановить какое-то состояние редактора с положением всех картинок и т.д.. А главное с возможностью дальше изменять все картинки сохраненные на этапе, когда пользователь решил сохранить состояние

Deff
07.06.2012, 01:59
mirek,
А смысл в клонировании - ведь есть исходник - зачем нужна копия ?

Если нужны события кидайте ссылку на действующий код, иначе закавыряемся в неувязках, хотя сегодня всё одно не успеваю

mirek
07.06.2012, 02:04
есть исходник - зачем нужна копия ?
Можно сохранить какое-то состояние и рисовать с нуля
Или потом вновь вернуться к сохраненному

Если нужны события кидайте ссылку на действующий код
Код пока на локальной машине только

А главная проблема в изменении ID всех элементов в клонированном DOM
Я думаю если изменить все ID то все бы должно заработать правильно

Deff
07.06.2012, 13:41
mirek,
Под событиями подразумевается не изменения/cостояние контента - оно сохраниться по любому, а привязка к событиям типо
onblur onchange onclick ondblclick onfocus onkeydown onkeypress onload onmousedown onmousemove

mirek
07.06.2012, 16:24
а привязка к событиям типо
onblur onchange onclick ondblclick onfocus onkeydown onkeypress onload onmousedown onmousemove
Мне надо, что-бы такие возможности jquery ui как resizable сохранились после того как DOM будет восстановлен из клона

Но пока у меня это не получается

Общая схема алгоритма вообще такая объект сохраняется в клон

А оригинал стирается для того, что-б "холст" стал пригоден для работы

Но если необходимо восстановить прежнюю работу то "холст" восстанавливается из клона

Так вот на восстановленом таким образом холсте не работают такие возможности jquery ui как resizable draggable (перетаскивание) и т.д. Другие же возможности не зависящие от jquery ui. Это навешанные мною события сохранились и работают

Но мне надо, что-бы такие возможности jquery ui как resizable draggable восстанавливались тоже

Хотя сейчас у меня все верно восстановлено с восстановлением всех оригинальных id

Смотрел исходный код до и после восстановления из клона

Получается 1 в 1

Deff
07.06.2012, 16:33
mirek,
Попробуйте так
<script type="text/javascript">
var Storage=[]
var Storage[0]=$("#img_id").clone(true).remove();
//Тут Тест восстановления из Storage[0] исходника
//....
</script>

mirek
07.06.2012, 16:57
Да я вот попробовал еще проще.

Даже если не стирать "холст", а просто восстановить его из клона на тот же самый то все возможности jquery ui - resizable draggable перестают работать

Стирать я пробовал кстати как методами remove так и detach

mirek
07.06.2012, 17:35
То есть при этом ни один из элементов описанной структуры


<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
07.06.2012, 17:35
То есть при этом ни один из элементов описанной структуры


<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 перестали работать

Deff
07.06.2012, 20:02
mirek,
я тут глянул про resizable draggable - я не пользовался данным расширением, возможно кто более опытный подскажет