jQuery .après avoir ajouté des éléments dans IE7/IE8

Question

Je ne suis pas sûr de ce que je fais mal et il n'y a aucune indication que cela ne devrait pas fonctionner dans IE. Mais le code suivant ne pas ajouter les éléments <dd> dans .après() au DOM:

shouts_list_selector = $("#shouts dl#shouts_list"); 

shout_object = $('<dt>') 
      .attr('id', shout.id) 
      .text(shout.name) 
      .append($('<span>').addClass('separator').text(' : ')) 
      .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when)) 
      .after($('<dd>').html(shout.message)) 

shout_object.prependTo(shouts_list_selector).slideDown('slow', 'swing'); 

cris est un objet contenant des messages. Cela fonctionne très bien dans Firefox et Chrome. Mais IE manque les éléments <dd>. Y at-il quelque chose de mal avec cet exemple ou une meilleure façon de le faire?

Edit: Voici un exemple montrant la question: http://jsfiddle.net/sx6YH/

Les balises DD montrent correctement lorsqu'il est exécuté dans Firefox ou Chrome. Mais pas dans IE.

Answer 1

J'ai pu obtenir ce travail simplement en créant la balise <dd> et appendingTo la liste juste après la <dt> comme ceci:

shouts_list = $('<dl>').attr('id', 'shouts_list'); 

$.each(shouts_object.shouts, function(id, shout) { 
    $('<dt>') 
     .attr('id', shout.id) 
     .text(shout.name) 
     .append($('<span>') 
       .text(' : ')) 
     .append($('<abbr>') 
       .attr('title', shout.timestamp) 
       .text(shout.when)) 
     .appendTo(shouts_list); 
    $('<dd>').html(shout.message) 
     .appendTo(shouts_list); 
}); 

shouts_list.appendTo('#shouts'); 

Cela fonctionne bien dans les deux IE8 et Firefox. Je me sens comme il peut y avoir un bogue dans IE8 avec la gestion .after

Answer 2

La raison pour laquelle les éléments <dd> ne s'affichent pas est que vous créez un fichier html non valide. avec votre code actuel du html est résolu à:

<dt id="1"> 
    test 
    <span class="separator"> : </span> 
</dt> 
<dd>hello</dd> 

le <dd> doit évidemment être à l'intérieur du <dt>.

votre code devrait ressembler à ceci:

shout_object = $('<dt>') 
     .attr('id', shout.id) 
     .text(shout.name) 
     .append($('<span>').addClass('separator').text(' : ')) 
     .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when)) 
     .append($('<dd>').html($().emoticon(shout.message))) 

alors votre code html sera bien et rendu dans IE7/8

Answer 3

J'ai trouvé la raison de ceci est un appendice imbriqué. IE8 ne semble pas être capable de les gérer correctement. J'ai eu ce même problème, @Andy Shinn m'a mis dans la bonne direction. Dans mon cas, je tentais d'ajouter un lien vers une liste non triée:

<ul id=menu></ul> 

avec les éléments suivants jQuery:

$("ul[id=menu]").append("<li><a href='test.html'>test</a></li>"); 

Cela fonctionne dans la plupart des navigateurs, mais pas dans IE8. Si vous ajoutez les non imbriquées il fonctionne:

$("ul[id=menu]").append("<li/>").html("<a href='test.html'>test</a>");