Home/ Questions/Q 7621527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:13:03+00:00

I’m not sure if it’s a bug in jQuery, FF/Chrome or IE or just

  • 0

I’m not sure if it’s a bug in jQuery, FF/Chrome or IE or just expected behavior. Unfortunately I don’t know jQuery that well to tell if following script should give the same results under different browsers.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div id="c">
        <form name="login" action="https://my_domain.com/my_login_script.php" method="post">
            <input type="text" name="email" value="sss" />
            <input type="text" name="password" value="pass" />
            <input type="submit" value="go" />
            </form>
    </div>

    <script type="text/javascript">
        $("#c").find('form[name=login]').submit(function() {
            alert($(this).serialize());
            $('#c').html("");
            alert($(this).serialize());
            alert($(this).html()); // empty string in IE, contents of <form> under FF
            return false;
        });
        </script>
</body>
</html>

What it does:

  1. Assigns handler for submit event to form ‘login’ contained in div “#c”
  2. In the event handler form is serialized and displayed in alert box.
  3. Contents of div “#c” is changed to empty string.
  4. Form is again serialized and output string displayed in alert box.
  5. Contents of ‘this’ is displayed in alert box – it’s empty in IE and has some html in FF/Chrome

In FF/Chrome alert boxes show:

  1. email=sss&password=pass
  2. email=sss&password=pass // The same output as above, ‘this’ has not changed?

In IE9 however:

  1. email=sss&password=pass
  2. “” // Empty string

Is it a bug in jQuery?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d say it’s more of how the browser handles the .innerHTML property than a jQuery bug (as jQuery calls innerHTML, which the browser would use to construct/reconstruct a DOM tree). See this example: http://jsfiddle.net/bhKCu/1/ (if it were a jQuery bug, that should behave the same no matter which browser as it uses innerHTML instead of $.html() right?).

    From jQuery.html():

    This method uses the browser’s innerHTML property. Some browsers may
    not generate a DOM that exactly replicates the HTML source provided.

    From jQuery 1.7.1:

    html: function( value ) {
        if ( value === undefined ) {
            return this[0] && this[0].nodeType === 1 ?
                this[0].innerHTML.replace(rinlinejQuery, "") :
                null;
    // See if we can take a shortcut and just use innerHTML
    } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
        (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
        !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

        value = value.replace(rxhtmlTag, "<$1></$2>");

        try {
            for ( var i = 0, l = this.length; i < l; i++ ) {
                // Remove element nodes and prevent memory leaks
                if ( this[i].nodeType === 1 ) {
                    jQuery.cleanData( this[i].getElementsByTagName("*") );
                    this[i].innerHTML = value; // HERE
                }
            }

        // If using innerHTML throws an exception, use the fallback method
        } catch(e) {
            this.empty().append( value );
        }

    } else if ( jQuery.isFunction( value ) ) {
        this.each(function(i){
            var self = jQuery( this );

            self.html( value.call(this, i, self.html()) );
        });

    } else {
        this.empty().append( value );
    }

    return this;
},
    • 0