jQuery dopo il metodo non funziona con elementi appena creati

Question

Per quanto posso dire, il seguente codice dovrebbe funzionare, creando un elemento <div> e quindi creando un elemento <p>; l'espressione dovrebbe risultare in un oggetto jQuery con due elementi:

$("<div>first element's content</div>").after("<p>second element's content</p>"); 

Tuttavia, ciò che ottengo è molto diverso. The documentation (vedere l'intestazione "Inserimento di nodi DOM disconnessi") mi dice che il codice sopra dovrebbe risultare in un oggetto jQuery, afferrando entrambi gli snippet HTML e creando i due elementi DOM. Ma, quello che ho ottenuto, in diverse versioni di jQuery, tutte sopra 1.4, è un oggetto jQuery con solo 1 nodo. Tuttavia, il seguente codice funziona bene, il ritorno (quello che credo sia) l'oggetto giusto jQuery, due elementi all'interno:

$("<div></div>").after("<p>second element's content</p>"); 

E questo esempio funziona così:

$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>"); 

Sembra che il .after() il metodo funziona correttamente se il primo nodo DOM che viene creato è vuoto, ma non quando non lo è (indipendentemente dal contenuto dei successivi nodi DOM aggiunti ad esso).

Mi manca qualcosa sugli interni di jQuery, eccentrici domini DOM e/o peculiarità JavaScript, oppure si tratta semplicemente di un bug jQuery persistente dalla versione 1.4 alla 1.7?

(Here's a meager JSFiddle dimostrando la questione abbastanza chiaramente.)

Answer 1

Questo è stato un bug noto in jQuery < 1.9. Vedere http://bugs.jquery.com/ticket/8759

In jQuery> = 1.9, occorre ricordare la following information from the upgrade guide:

Prima di 1.9, .after(), .before(), e .replaceWith() avrebbe tentato di aggiungere o modificare i nodi nella corrente jQuery impostato se il primo nodo nel set non era collegato a un documento, e in questi casi restituisce un nuovo set jQuery piuttosto che il set originale. Questo ha creato diverse incongruenze e bug evidenti: il metodo potrebbe o non potrebbe restituire un nuovo risultato a seconda dei suoi argomenti! A partire da 1.9, questi metodi restituiscono sempre il set originale non modificato e il tentativo di utilizzare .after(), .before() o .replaceWith() su un nodo senza un genitore non ha alcun effetto - ovvero, né l'insieme né i nodi in esso contenuti vengono modificati.

Answer 2

Usa add() per aggiungere oggetti alla collezione. Io uso after() di più in elementi DOM già esistenti o memorizzati in una variabile, ma la maggior parte delle volte, se lavori con il markup dinamico, è più pratico usare l'equivalente insertAfter().

$("<div>first element's content</div>").add("<p>second element's content</p>"); 

EDIT:

Questo funziona ...

var $el = $('<div/>', { 
    text: 'hey there' 
}).after('<p>Lorem</p>'); 

Answer 3

ho trovato che ero ancora a volte hanno problemi con .add() al posto di .after(), quindi un altro modo semplice per aggirare questo bug è quello di fare un tiro di distanza elemento di involucro, .append() gli elementi di pari livello, e utilizzare .html() per ottenere solo il contenuto interno del wrapper.

Esempio:

$('body').append(
    $('<span/>').append(
     $("<div>first element's content</div>") 
    ).append(
     $("<p>second element's content</p>") 
    ).html() 
); 

Questo aggiungerà la <div> e <p> ma scartare il esterno <span>. Ho trovato questo funziona normalmente con .append() ma può avere problemi con .appendTo()