JQuery после ie8/ie7 не работает

Question

Я пытаюсь вставить данные после существующего элемента DOM. Я получаю сообщение об ошибке «Недопустимый аргумент». - this.parentNode.insertBefore

Это не работает в IE8 или IE7. Идеи?

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

Я не думаю, что это комментарии. Я все еще получаю ошибку даже без них.

Проблема уходит, однако, если я включаю отсутствующий </form> тег с тегами внутри #customer-info. (Валидатор - ваш друг!)

Странная ошибка, хотя, по-видимому, связана с необычными несовместимыми иерархическими трюками, которые IE выполняет при заданном неверно вложенном HTML.

Answer 2

Я просто решил это. Это частые комментарии html в конце div. Это были беспорядки в jquery в строке 4103. «this.nextSibling» хранился в DOM как DispHTMLCommentElement. Похоже, это вызывало проблемы. Я не уверен, что сохранение комментариев в DOM является стандартным или нет. Похоже, что ни Safari, ни Chrome, ни FF этого не делают.

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; 
     } 
    },