ie8/ie7之后的jquery不工作答案

【问题标题】：Jquery after ie8/ie7 not workingie8/ie7之后的jquery不工作
【发布时间】：2011-04-27 12:49:07
【问题描述】：

我正在尝试在现有 DOM 元素之后插入数据。我收到错误“无效参数”。 -- this.parentNode.insertBefore

这在 IE8 或 IE7 中不起作用。想法？

<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>

【问题讨论】：

标签： jquery internet-explorer jquery-1.4

【解决方案1】：

我不认为是 cmets。即使没有它们，我仍然会收到错误消息。

但是，如果我在#customer-info 中包含缺少的</form> 关闭标签，问题就会消失。（验证者是你的朋友！）

但奇怪的错误，可能与 IE 在给定错误嵌套的 HTML 时所做的奇怪的不一致层次结构技巧有关。

【讨论】：

哇。你是对的。我刚刚测试了这个。如果标签对于 div 元素的格式不正确，它会在 IE7 和 IE8 中爆炸。例如，
...
问题为零。然而，
...
炸毁了 IE7 和 IE8。 “限制：IE 经常会让你失望（我对此无能为力）”
是的，这里发生的事情是 IE 所谓的“包含”，这会导致不一致的 DOM，它不是一个单一的层次结构。请参阅关于重叠标签here 的部分，以了解有关这种恐怖的一些信息。我猜不一致的层次结构（实际上有两个不同的父节点！）使 IE 对新插入的内容的实际去向感到困惑。

【解决方案2】：

我刚刚解决了这个问题。这是 div 末尾的可怕的 html cmets。那些在第 4103 行搞砸了 jquery。“this.nextSibling”作为 DispHTMLCommentElement 存储在 DOM 中。似乎这是导致问题的原因。我不确定在 DOM 中保存 cmets 是否是标准的。似乎 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;
        }
    },

【讨论】：

在 DOM 中保存 cmets 是标准的，所有浏览器都这样做。