JQuery UI странное поведение с .clone (правда, правда) + .remove () - PullRequest
Новая
       17

JQuery UI странное поведение с .clone (правда, правда) + .remove ()

0 голосов
/ 28 февраля 2012

Я испытываю странное поведение с jquery-ui и jquery .clone (), remove (). Я использую jquery 1.7 и jquery-ui 1.8.16. Проблема заключается в том, что когда я удаляю элемент из глубокого клонированного элемента с помощью функции remove (), удаление влияет на клонированный элемент И соответствующий элемент в документе, удаляя перетаскиваемые свойства из элемента в DOM. Я не уверен, что делаю что-то не так, но мне кажется, что я либо неправильно понял, как работает клон (true, true), либо ошибка в jquery-ui.

рассмотрим следующее 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#testp').draggable();
    //the following line causes the draggable classes to be removed from the document
    //as well as the cloned object ,the expected behaviour is that that #testp will be 
    //removed only from the clone...
          var test = $("#test")
           .clone(true,true)
           .find('#testp')
           .remove()
           .end(); //some more manipulation here
        });
  </script>
</head>
<body>
  <div id="test">
    <p id="testp">some text</p>
  </div>
</body>
    </html>

UPDATE: Кажется, что .clone (true, true) по-прежнему хранит некоторые данные, общие для клона и оригинала. Даже с изменением идентификаторов / применением .draggable () с помощью селектора классов и без удаления какого-либо элемента из dom, перетаскивание клона переместит оригинал и не повлияет на клон (как можно подумать). другие обработчики, такие как click и т. д., клонированы правильно

После просмотра некоторых сообщений о проблемах, клонированных в div с (true, true) и перетаскиваемым плагином, я решил воздержаться от копирования клонированных div и т. Д. И просто использовать detach () и повторно подключить его в качестве временного решения.

Примечание для тех, кто пытался клонировать (true, true) клонировать div с применением плагина draggable (): если вы клонируете (true, true), некоторые данные будут скопированы в клон, и, применив к нему draggable (), вы перетянете оригинал, и я думаю, это не то, что вы намеревались сделать. вместо этого сделайте поверхностный .clone (), а затем привяжите draggable () к клону.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2012

Пожалуйста, просмотрите: Какой самый эффективный способ глубокого клонирования объекта в JavaScript?

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

В вашем случае вы используете селектор идентификатора, а затем удаляете его - он удалит первый экземпляр идентификатора, который он найдет.

Возможно, вам понадобится сделать что-то вроде: (подробная версия для ясности) 

var test = $("#test");
var newtest = test.clone(true, true);
newtest.find('#testp').remove();
newtest.attr('id', 'newtest');
newtest.appendTo("#whatever");

Возможно, вы сделаете перепривязку здесь ...

см. Этот пример: http://jsfiddle.net/MarkSchultheiss/yfD3r/

0 голосов
/ 28 февраля 2012

Попробуйте отдельные утверждения: 

var test = $("#test");
test.clone(true,true).appendTo("whatever").find('#testp').remove();

PS: clone () и remove () находятся в ядре jQuery. Наличие jQuery UI не должно влиять на них, но обязательно попробуйте без UI.

...