jQuery d'après la méthode ne fonctionne pas avec les nouveaux éléments

Dans la mesure où je peux dire, le code suivant devrait fonctionner, la création d'un <div> élément, puis en créant une <p> élément; l'expression devrait aboutir à un objet jQuery avec deux éléments:

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

Cependant, ce que je reçois est très différent. La documentation (voir la rubrique "Insertion Déconnecté Nœuds DOM") raconte-moi le code ci-dessus devrait aboutir à un objet jQuery, saisissant toutes les deux bouts de code HTML et construire les deux éléments du DOM. Mais, ce que j'ai obtenu, dans les différentes versions de jQuery, tous au-dessus de 1.4, est un objet jQuery avec seulement 1 nœud. Toutefois, le code suivant fonctionne très bien, le retour (ce que je crois) le bon objet jQuery, deux éléments à l'intérieur:

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

Et que cet exemple fonctionne ainsi:

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

Il semble que le .after() méthode fonctionne bien si le premier nœud DOM créé est vide, mais ne fonctionne pas quand il n'est pas (quel que soit le contenu de la suite des nœuds DOM d'être ajouté).

Suis-je raté quelque chose à propos de jQuery-même, bizarre DOM questions et/ou JavaScript particularités, ou est-ce simplement un jQuery bug qui a persisté à partir de la version 1.4 à travers 1.7?

(Voici un maigre JSFiddle démontrant la question assez clairement.)

  • Comme mentionné ci-dessous dans les commentaires de elclanrs réponse, add est un substitut viable, et j'ai préparé un nouvelle JSFiddle pour démontrer que cela fonctionne. Toutefois, cela n'explique pas pourquoi le comportement affiché sur la doc (et même dans ses commentaires, voir le thread entier contenant les réponses de "MarkAndrewSlade") n'est pas disponible pour le after méthode de jQuery objets nouvellement créé, l'élément lors de l'élément a de contenu.
InformationsquelleAutor Paul Sebastian Bruno | 2012-05-07
  1. 7

    C'était un bug connu de jQuery < 1.9. Voir http://bugs.jquery.com/ticket/8759

    En jQuery >= 1.9, le informations suivantes du guide de mise à niveau convient de noter:

    Avant 1.9, .after(), .before(), et .replaceWith() de tenter d'ajouter ou de modifier des noeuds dans le courant de jQuery si le premier nœud du jeu n'était pas connecté à un document, et dans ces cas de retour d'un nouveau jQuery plutôt que le jeu original. Cela a créé plusieurs incohérences et les bugs--la méthode pourrait ou ne pourrait pas renvoyer un nouveau résultat en fonction de ses arguments! Que de 1,9, ces méthodes renvoient toujours l'original non modifié définir et d'essayer d'utiliser .after(), .before(), ou .replaceWith() sur un nœud sans un parent n'a pas d'effet--c'est que, ni ou les nœuds qu'il contient sont modifiées.

    • Merci beaucoup, Mike.
    • Étrangement, je reçois ce même bug après la mise à jour de jQuery 1.8.2 à 1.11.0. L' $.après() et $.avant de() les méthodes ne fonctionnent pas sur les nouveaux éléments. Je dois tout d'abord ajouter le nouvellement créé élément DOM, puis insérez le nouveau contenu. Une autre solution est l'utilisation de $.méthode add (), mais il ne fonctionnera pas si vous souhaitez insérer du contenu avant de l'élément.
    • Je reçois aussi ce problème après la mise à jour de jQuery 1.10
    • J'utilise la version 2.2.3 et il ne fonctionne toujours pas. Enfin vérifié SI après cogner ma tête contre le mur.
    InformationsquelleAutor Heretic Monkey
  2. 6

    Utilisation add() pour ajouter des objets de la collection. J'utilise after() plus dans les DOM éléments qui existent déjà ou qui sont mis en cache dans une variable, mais la plupart du temps, si vous travaillez avec dynamique de balisage est plus pratique d'utiliser l'équivalent insertAfter().

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

    EDIT:

    Cela fonctionne...

    var $el = $('<div/>', {
    text: 'hey there'
}).after('<p>Lorem</p>');
    • Merci à vous, elclanrs, pour votre réponse. Je vais utiliser add dans l'avenir. Et je viens de fouettée en place un nouvelle JSFiddle pour démontrer que add ne faire ce que vous avez mentionné. Mais cela ne veut pas répondre à ma question, c'est pourquoi after ne le fait pas.
    • Voir modifier...je ne sais pas pourquoi le bug, mais qui fonctionne.
    • Merci encore. Comme il n'a pas répondu à ma question, je n'ai pas donné de réponse de crédit, mais j'ai jusqu'-voté votre réponse à donner le respect dû pour trouver un nouveau morceau de granularité dans ma question.
    InformationsquelleAutor elclanrs
  3. 0

    J'ai trouvé que j'ai encore parfois d'avoir des problèmes avec .add() en place de .after(), donc un autre moyen facile de contourner ce bug est de faire un jeter élément wrapper, .append() les éléments frères, et l'utilisation .html() pour obtenir exactement l'intérieur contenu de l'emballage.

    Exemple:

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

    Cela va ajouter de la <div> et <p> mais jeter l'extérieur <span>. J'ai trouvé cela fonctionne généralement bien avec .append() mais peut avoir des problèmes avec .appendTo()

    InformationsquelleAutor WebChemist
  4. 0

    En jQuery 1.12.4, j'ai découvert que l'utilisation d'un sélecteur de classe au lieu d'un sélecteur d'ID résout ce problème.

    Si vous êtes aux prises avec

        $("#myelement1").after("<p>test</p>"),

    ajouter une classe unique à votre élément et essayez ce qui suit:

        $(".myelement1").after("<p>test</p>")

    InformationsquelleAutor LePatay