Как вы перемещаете html из одного div в другой с помощью JQuery без нарушения javascript

У меня есть два div для разных разделов моей веб-страницы, рабочего и справочного раздела. Один - фиксированный размер, другой - переменный размер, и они вертикально сложены. Я пытаюсь создать его так, чтобы, если вы хотите работать над чем-то на панели справки, вы щелкаете по ссылке и обмениваете все данные между двумя панелями. Моя идея состояла в том, чтобы сделать следующее:

var working = $("#working_pane").html();
var ref = $("#reference_pane").html();

$("#working_pane").html(ref);
$("#reference_pane").html(working);

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

Можно ли переместить html без нарушения содержащегося javascript?

ОТВЕТЫ

Ответ 1

Когда вы работаете с битами HTML-документа, вы должны стремиться работать с объектами Node, которые являются содержимым, которое видит браузер, а не строками HTML.

Чтобы получить HTML, браузер должен посмотреть Узлы и сериализовать их в строку. Затем, когда вы назначаете этот HTML для другой части документа (с помощью innerHTML или jQuery html(...)), вы сообщаете обозревателю об уничтожении всего содержимого, которое было ранее в элементе, кропотливо разбирайте строку HTML обратно в новую набор объектов Node и вставить эти новые узлы в элемент.

Это медленно, расточительно и теряет любой аспект исходных объектов Node, которые не могут быть выражены в сериализованном HTML, например:

  • функции/прослушиватели событий (вот почему ваши редакторы ломаются)
  • ссылки на переменные другого кода JavaScript для узлов (также разрывает скрипты)
  • значения поля формы (кроме, частично, в IE из-за ошибки)
  • пользовательские свойства

Итак - и это касается того, используете ли вы jQuery или просто DOM - не бросайте HTML! Возьмите исходные объекты Node и вставьте их в нужное место (они покинут место, из которого они первоначально были автоматически). Ссылки остаются неизменными, поэтому скрипты будут работать.

// contents() gives you a list of element and text node children
var working = $("#working_pane").contents();
var ref = $("#reference_pane").contents();

// append can be given a list of nodes to append instead of HTML text
$("#working_pane").append(ref);
$("#reference_pane").append(working);

Ответ 2

Это может произойти, возможно, в результате дублирования идентификаторов. в принципе у вас может быть элемент a в div, который имеет id = id1, теперь это сохраняется в var и вводится в новый div. теперь в настоящее время кажется, что у вас нет механизма для того, чтобы убедиться, что у вас нет дубликатов идентификаторов одновременно. это может нарушить js

Итак, изучите это, и если вы убедитесь, что элементы сначала хранятся в var, тогда оригиналы удаляются, а затем добавляются в новое место.