jQuery, html5, append () / appendTo () et IE
Comment répliquer:
- Créer une page html5.
- Assurez-vous d'avoir le script de remysharp.com/2009/01/07/html5-enabling-script/ajoutée, de sorte que IE les avis des balises.
- Créer une codé en dur
<section id='anything'></section>
tag. - À l'aide de jQuery 1.3.2, ajouter un autre tag section:
$('#anything').append('<section id="whatever"></section>');
jusqu'à présent, tout fonctionne dans tous les navigateurs. - Répétez l'étape précédente.
$('#whatever').append('<section id="fail"></section>');
C'est là que IE6/7 échoue. Firefox/Safari va continuer à travailler.
Erreur
Pensées
- Il se pourrait que IE6/7 ne peut pas gérer le HTML5 tag section. Je dis cela parce que lorsque je passe à l'étape 4 de
<section>
à<div>
IE6/7 va commencer à travailler. - Si j'utilise
document.createElement()
et de créer mon nouvel élément, il fonctionne, mais il semble comme jQueryappend()
a un problème avec les éléments html5.
source d'informationauteur Ali Karbassi
Vous devez vous connecter pour publier un commentaire.
Le bug est dans IE mise en œuvre de innerHTML pour une raison quelconque, il n'aime pas les "inconnus" éléments insérés via innerHTML - alors que les scripts DOM est très bien.
jQuery utilise crée une holding div, puis descend dans la balise que vous souhaitez ajouter dans la via innerHTML. IE voit maintenant les éléments inconnus que deux nouvelles cassé les éléments, c'est à dire
<article>content</article>
est considéré commeARTICLE
#text
/ARTICLE
causée par innerHTML borking.Voici un exemple, check it out sous IE, et vous verrez que innerHTML méthode d'insertion signale de manière incorrecte 3 nœuds inséré dans le div: http://jsbin.com/olizu
Capture d'écran pour les personnes sans IE: http://leftlogic.litmusapp.com/pub/2c3ea3e
Je suis tombé sur cette question, trop. La solution semble être d'utiliser innerHTML sur un élément qui est déjà attaché au document, puis d'en extraire les nœuds créés. J'ai créé ce p'fonction pour le faire:
http://jdbartlett.github.com/innershiv/
Tenez vos chevaux sur le sarcasme là, tout le monde. Jetant un coup d'œil http://html5shiv.googlecode.com/svn/trunk/html5.jsle html5 shiv n'a réussi à tromper IE6/7 en faisant un createElement().
Dans karbassi du cas ci-dessus, on pourrait l'espérer, IE6/7 serait d'abord de prêter attention à l'html5 shiv, puis effectuer le jQuery append (), comme prévu à chaque fois après que. Apparemment, il ne veut pas faire les choses dans l'ordre, lors de l'ajout d'un ajout. C'est bon à savoir.
Ne le HTML5 shiv poignée
innerHTML
? Donc très probablement traiteinnerHTML
différemment que les méthodes du DOM commecreateElement
et la lecture de jQuery source (que je recommande), il semble que votre code est le déclenchement deinnerHTML
au lieu de les méthodes du DOM. Vous pouvez essayer de réécrire<section id="fail"></section>
comme<section id="fail" />
(qui, à première vue, devrait déclencher les méthodes du DOM dans le processus de nettoyage) et de voir si il se comporte différemment. Si oui, vous avez repéré un bug en jQuery et d'une limitation de l'HTML5 shiv. Si pas, au moins c'est une possibilité à la croix-off.HTML5 n'existait pas lors de IE6 et 7 ont été développés.