Jquery après ie8/ie7 ne fonctionne pas

Question

J'essaie d'insérer des données après un élément DOM existant. Je reçois une erreur "Argument invalide". Ce paramètre ne fonctionne pas dans IE8 ou IE7. Des idées?

exemple Jfiddle: http://jsfiddle.net/zJ3Fe/

<a href="#" id="delete_promo">Click</a> 

<div id="customer-info" class="span-12"> 
     <form id="UserFormCheckoutForm" method="post" action="/chicagophotographycenter/checkout" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST" /></div> 
     <h2 class="line"><span>Billing/Shipping Address</span></h2> 
     <div class="padding"> 
      <div id="billing-first-name"> 
       <label>First Name</label><br /> 
       <span><input name="data[User][first_name]" type="text" maxlength="150" value="Fred" id="UserFirstName" /></span> 
      </div> 
      <div id="billing-last-name"> 
       <label>Last Name</label><br /> 
       <span><input name="data[User][last_name]" type="text" maxlength="150" value="" id="UserLastName" /></span> 
      </div><br /> 
      <div id="billing-email"> 
       <label>Email</label><br /> 
       <span><input name="data[User][email]" type="text" maxlength="255" value="" id="UserEmail" /></span><br /> 
      </div> 
      <div id="billing-phone"> 
       <label>Phone Number</label><br /> 
       <span><input name="data[Customer][phone]" type="text" maxlength="15" value="" id="CustomerPhone" /></span><br /> 
      </div> 
      <label>Street Address</label><br /> 
      <span><input name="data[Address][0][address]" type="text" maxlength="150" value="" id="Address0Address" /></span><br /> 
      <span><input name="data[Address][0][address2]" type="text" maxlength="150" value="Suite 203" id="Address0Address2" /></span><br /> 
      <div id="billing-city"> 
       <label>City</label><br /> 
       <span><input name="data[Address][0][city]" type="text" maxlength="150" value="" id="Address0City" /></span> 
      </div> 
      <div id="billing-state"> 
       <label>State</label><br /> 
       <span><input name="data[Address][0][state]" type="text" maxlength="2" value="IL" id="Address0State" /></span> 
      </div> 
      <div id="billing-zip"> 
       <label>Zip</label><br /> 
       <span><input name="data[Address][0][zip]" type="text" maxlength="10" value="" id="Address0Zip" /></span><br /> 
      </div> 
     </div><!-- end .padding --> 
    </div><!-- end #customer-info --> 



<script type="text/javascript" charset="utf-8"> 
    $('#delete_promo').click(function() {  
     $('#customer-info').after('<div id="payment">Credit Card</div>'); 

     $('#UserFirstName').val('Test'); 

     return false; 
    }); 
</script> 

Answer 1

Je ne pense pas que ce soit les commentaires. Je reçois toujours l'erreur même sans eux.

Le problème disparaît, cependant, si j'inclue le </form> close-tag absent #customer-info. (Le validateur est votre ami!)

Erreur étrange cependant, vraisemblablement liée aux étranges astuces de hiérarchie inconsistante que fait l'IE quand on lui donne du HTML imbriqué.

Answer 2

Je viens de résoudre cela. Ce sont les commentaires html freaking à la fin de la div. Ceux-ci étaient en désordre le jquery sur la ligne 4103. 'this.nextSibling' a été stocké dans le DOM comme DispHTMLCommentElement. Apparaît que cela causait les problèmes. Je ne suis pas sûr si la sauvegarde des commentaires dans le DOM est standard ou non. Apparaît que ni Safari, Chrome ou FF font cela.

after: function() { 
     if (this[0] && this[0].parentNode) { 
      return this.domManip(arguments, false, function(elem) { 
       this.parentNode.insertBefore(elem, this.nextSibling); 
      }); 
     } else if (arguments.length) { 
      var set = this.pushStack(this, "after", arguments); 
      set.push.apply(set, jQuery(arguments[0]).toArray()); 
      return set; 
     } 
    },