jquery AppendTo & Append Erreur dans Firefox

Question

Je reçois une erreur étrange en utilisant jQuery 1.3.2 et Firefox. J'ai créé une petite fenêtre pop-up pour un élément et je suis en utilisant le code

var popupWindow = $($('#template')[0].innerHTML).css(
      'top', top).css(
      'left', left).css(
      'position', 'absolute').css(
      'opacity', '1'); 

je puis utiliser les fonctions append() et appendTo() pour fournir essentiellement et j'essayer de déterminer la hauteur et la largeur, mais obtenir JS erreurs d'exception par dessous

var right = left + $(popupWindow).width(); // empty width, js exception 
var bottom = top + $(popupWindow).height(); //empty height, js exception 

popupWindow est indiqué pour la commande append(), mais il est impossible d'obtenir la largeur, la hauteur, des éléments comme ils ne coûtent pas visibles à l'intérieur FF-DOM.

Dans IE tout fonctionne très bien mais pas dans Firefox?

Est-ce que quelqu'un a des idées que j'essaye depuis quelques heures maintenant et obtenir un mur de briques.

Answer 1

Je ne suis pas tout à fait sûr pourquoi vous utilisez

var popupWindow = $($('#template')[0].innerHTML) 

qui se traduit essentiellement à

« obtenir les éléments qui ont un id de modèle (qui implcitly qu'un seul élément pour HTML valide), puis obtenez le innerHTML du premier élément, puis envelopper tous les éléments contenus dans innerHTML dans un objet jQuery. "

Pourquoi ne pas utiliser

var popupWindow = $('#template').css({ 
         top : top, 
         left: left, 
         position: 'absolute', 
         opacity: 1 }); 

, pourriez également envisager d'utiliser une classe au lieu de css en ligne. S'il vous plaît poster la mise en page HTML si vous avez besoin d'aide supplémentaire.

Answer 2

var popupWindow = $($('#template')[0].innerHTML) 

Oui, vous ne voulez vraiment pas faire cela.

Ceci obtient le code HTML du modèle div et l'envoie à la fonction $(), qui est une fonction polyvalente. En fonction du contenu de #template, il peut créer du HTML (éventuellement plusieurs éléments, en supprimant tout contenu textuel immédiat), ou le traiter comme un sélecteur et sélectionner des éléments correspondants sur la page.

(Ce n'est pas une de mes fonctionnalités préférées de jQuery.)

De plus, en utilisant innerHTML avec jQuery a des effets secondaires dans la mesure où jQuery ajoute ses propres propriétés à des éléments pour les identifier pour ajouter des gestionnaires de données et d'événements . Si vous copiez le innerHTML sur IE < 8 (qui a un bug où il pense que les attributs et les propriétés sont la même chose), vous copierez par inadvertance ces ID internes jQuery, en faisant deux copies du même élément et en confondant la bibliothèque. Vous êtes censé utiliser .html() pour obtenir le balisage avec jQuery; Cela utilise un RegExp vile cassé pour essayer de supprimer les attributs d'ID internes avant de vous remettre le balisage.

(Ceci n'est pas non plus l'une de mes fonctionnalités préférées de jQuery.)

Si vous voulez simplement définir les styles sur l'élément de modèle, dire:

var popupWindow= $('#template'); 
popupWindow.css({top: '1px', left: '2px', ...}); 

Si vous souhaitez effectuer une copie du modèle et définir les styles que:

var popupWindow= $('#template').clone(); 
popupWindow.css(...); 

en outre il n'y a pas besoin de dire:

$(popupWindow) 

comme popupWindow est déjà une enveloppe jQuery. Vous le faites juste faire une autre copie de la liste des éléments internes.

js exception 

Quelle exception? Personnellement, je ne reçois pas d'exception, mais cela dépend beaucoup de ce que vous mettez à l'intérieur #template.