Jquery after ie8/ie7 not working

可紊 提交于 2019-12-12 17:30:05

问题


I'm trying to insert data after an existing DOM element. I'm getting an error "Invalid argument." -- this.parentNode.insertBefore

This is not working in IE8 or IE7. Ideas?

Jfiddle example: 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>

回答1:


I don't think it's the comments. I still get the error even without them.

The problem goes away, however, if I include the missing </form> close-tag inside #customer-info. (The validator is your friend!)

Strange error though, presumably related to the weird inconsistent-hierarchy tricks IE does when given mis-nested HTML.




回答2:


I just solved this. It's the freaking html comments at the end of the div's. Those were messing up the jquery on line 4103. 'this.nextSibling' was stored in the DOM as DispHTMLCommentElement. Appears this was causing the issues. I'm not sure if saving comments in the DOM is standard or not. Appears that neither Safari, Chrome or FF do that.

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


来源:https://stackoverflow.com/questions/3969439/jquery-after-ie8-ie7-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!