¿Cómo se mueve html de un div a otro con Jquery sin romper javascript

Question

Tengo dos divs para diferentes secciones de mi página web, una sección de trabajo y una de referencia. Uno es de tamaño fijo, el otro es de tamaño variable y están apilados verticalmente. Estoy intentando diseñarlo de modo que si quieres trabajar en algo en el panel de referencia, haces clic en un enlace y se intercambian todos los datos entre los dos paneles. Mi idea era hacer lo siguiente:

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

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

El problema con esto, es que parece que cualquier javascript que se hace referencia en el interior de estos paneles (por ejemplo, en lugar editores) se rompen al conectar. No se producen errores de javascript, es solo que no pasa nada, al igual que los vínculos de Javascript están rotos.

¿Hay alguna para mover el html sin romper el javascript que contiene?

Answer 1

Cuando trabaje con bits de un documento HTML, debe intentar trabajar con los objetos de nodo que son el contenido como lo ve el navegador, no cadenas de HTML.

Para obtener HTML, el navegador tiene que mirar los Nodos y serializarlos en una cadena. Luego, cuando asigna ese HTML a otra parte del documento (con innerHTML o jQuery html(...)), le está diciendo al navegador que destruya todo el contenido que estaba previamente en el elemento, analice laboriosamente la cadena HTML en un nuevo conjunto de objetos Nodo e inserte estos nuevos Nodos en el elemento.

Esto es lento, derrochador, y pierde cualquier aspecto de los objetos Node originales que no se pueden expresar en HTML en serie, tales como:

• de controlador de eventos funciones/oyentes (que es por eso que sus editores de ruptura)
• referencias a variables otro código Javascript a los nodos (también rompe guiones)
• los valores de campo de formulario (excepto, en parte, en el IE debido a un error)
• propiedades personalizadas

Por lo tanto, y esto se aplica ya sea que esté usando jQuery o el DOM simple - ¡no arroje HTML! Tome los objetos del nodo original e insértelos en el lugar que desee (saldrán del lugar donde originalmente estaban). Las referencias permanecen intactas, por lo que los scripts seguirán funcionando.

// 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); 

Answer 2

Esto podría estar sucediendo tal vez como resultado de la duplicación de los identificadores. básicamente, puedes tener el elemento a en un div que tiene id = id1 ahora esto se almacena en una var y se inyecta en un nuevo div. ahora parece que no tienes ningún mecanismo para asegurarte de que no tienes identificadores duplicados al mismo tiempo. esto puede romper js

Mire esto y si se asegura de que los elementos se almacenen primero en una var, entonces los originales se eliminan y luego se anexan a una nueva ubicación.