Как Вы перемещаете HTML от одного отделения другому с JQuery, не повреждая JavaScript
У меня есть два отделения для различных разделов моей веб-страницы, работы и справочного отдела. Каждый - фиксированный размер, другой переменный измеренный, и они вертикально сложены. Я пытаюсь разработать его так, чтобы, если Вы хотите работать над чем-то в ссылочной области, Вы нажали на ссылку, и это подкачивает все данные между двумя областями. Моя идея состояла в том, чтобы сделать следующее:
var working = $("#working_pane").html();
var ref = $("#reference_pane").html();
$("#working_pane").html(ref);
$("#reference_pane").html(working);
Проблема с этим, кажется, что любой JavaScript, на который ссылаются в этих областях (например, на месте редакторы), повреждается после переключения. Никакие ошибки JavaScript не происходят, это просто, что ничего не происходит, как JavaScript, связи повреждаются.
Там кто-либо должен переместить HTML, не повреждая содержавший JavaScript?
2 ответа
Когда вы работаете с фрагментами HTML-документа, вы должны стремиться работать с объектами Node, которые являются содержимым, как его видит браузер, а не со строками HTML.
Чтобы получить HTML, браузер должен просмотреть узлы и преобразовать их в строку. Затем, когда вы присваиваете этот HTML другой части документа (с помощью innerHTML или jQuery html(...)), вы говорите браузеру уничтожить все содержимое, которое ранее было в элементе, кропотливо разобрать строку HTML обратно в новый набор объектов Node и вставить эти новые Node в элемент.
Это медленно, расточительно и теряет все аспекты исходных объектов Node, которые не могут быть выражены в сериализованном HTML, такие как:
- функции/слушатели обработчиков событий (именно поэтому ваши редакторы ломаются)
- ссылки на переменные, которые другой код JavaScript имеет к узлам (также ломает скрипты)
- значения полей формы (кроме, частично, IE из-за ошибки)
- пользовательские свойства
Поэтому - и это применимо, используете ли вы jQuery или обычный DOM - не разбрасывайтесь HTML! Возьмите исходные объекты узлов и вставьте их в нужное вам место (они автоматически покинут то место, где были изначально). Ссылки остаются нетронутыми, поэтому скрипты будут продолжать работать.
// 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);
Это могло произойти, возможно, в результате повторяющихся идентификаторов. в основном у вас может быть элемент a в div, который имеет id = id1, теперь он сохраняется в var и вводится в новый div. теперь кажется, что у вас нет механизма, чтобы убедиться, что у вас одновременно нет повторяющихся идентификаторов. это может сломать js
. Так что посмотрите на это, и если вы убедитесь, что элементы сначала сохраняются в var, то оригиналы удаляются, а затем добавляются в новое место.