Come spostare html da un div a un altro con Jquery senza rompere javascript

Question

Ho due div per diverse sezioni della mia pagina web, una sezione di lavoro e di riferimento. Uno è di dimensioni fisse, l'altro è di dimensioni variabili e sono impilati verticalmente. Sto cercando di progettarlo in modo che se vuoi lavorare su qualcosa nel pannello di riferimento, fai clic su un link e scambia tutti i dati tra i due riquadri. La mia idea era quella di effettuare le seguenti operazioni:

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

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

Il problema con questo, è sembra che qualsiasi javascript riferimento all'interno di questi riquadri (ad esempio, al posto editori) ottenere rotto dopo il passaggio. Non si verificano errori javascript, è solo che non accade nulla, come i legami javascript sono rotti.

C'è qualcuno per spostare l'html senza rompere il javascript contenuto?

Answer 1

Quando si lavora con bit di un documento HTML, si dovrebbe mirare a lavorare con gli oggetti Nodo che sono il contenuto come lo vede il browser, non stringhe HTML.

Per ottenere HTML, il browser deve esaminare i nodi e serializzarli su una stringa. Quindi quando assegni quell'HTML a un'altra parte del documento (con innerHTML o jQuery html(...)), stai dicendo al browser di distruggere tutto il contenuto che era precedentemente nell'elemento, rielaborare laboriosamente la stringa HTML in un nuovo set di oggetti Nodo e inserisci questi nuovi nodi nell'elemento.

Questa è lento, dispendioso, e perde qualsiasi aspetto degli oggetti nodo originale che non possono essere espressi in serializzato HTML, come ad esempio:

• gestore eventi funzioni/ascoltatori (che è il motivo per cui i vostri editori sono rottura)
• riferimenti variabile altro codice JavaScript deve i nodi (rompe anche gli script)
• valori dei campi modulo (tranne, in parte, in IE a causa di un bug)
• proprietà personalizzate

Quindi, e questo vale sia per jQuery o il semplice DOM: non gettare HTML in giro! Prendi gli oggetti del nodo originale e inseriscili nel posto che desideri (lasceranno il posto che originariamente erano automaticamente). I riferimenti rimangono intatti così gli script continueranno a funzionare.

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

Questo potrebbe accadere forse come risultato di ID duplicati. in pratica puoi avere un elemento a in un div che ha id = id1 ora questo viene memorizzato in una var e viene iniettato in un nuovo div. attualmente sembra che tu non abbia alcun meccanismo per assicurarti di non avere id duplicati allo stesso tempo. questo può rompersi js

Quindi, guarda in questo e se assicuri che gli elementi vengano prima memorizzati in una var, gli originali vengono rimossi e quindi aggiunti in una nuova posizione.