Question

我不确定这是jQuery，FF / Chrome或IE中的错误还是只是预期的行为。不幸的是，我不知道jQuery是否可以判断下面的脚本是否应该在不同的浏览器下提供相同的结果。

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

它的作用：

将提交事件的处理程序分配给div“#c”
在事件处理程序表单中序列化并显示在警告框中。
div“#c”的内容更改为空字符串。
表格再次序列化，输出字符串显示在警告框中。
'this'的内容显示在警告框中 - 它在IE中为空并且在FF / Chrome中有一些html

在FF / Chrome警告框中显示：

电子邮件= SSS＆安培;密码=通过
email = sss＆amp; password = pass //与上面相同的输出，'this'没有改变？

然而在IE9中：

电子邮件= SSS＆安培;密码=通过
“”//空字符串

这是jQuery中的错误吗？

Answer 1

我想更多的是浏览器如何处理.innerHTML属性而不是jQuery错误（因为jQuery调用innerHTML，浏览器将使用它来构造/重构DOM树）。请参阅此示例：http://jsfiddle.net/bhKCu/1/（如果它是一个jQuery错误，无论哪个浏览器使用innerHTML而不是$.html()，它的行为都应该相同？）。

From jQuery.html():

此方法使用浏览器的innerHTML属性。有些浏览器可能不生成完全复制所提供的HTML源的DOM。

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

jQuery v1.7.1，IE和Chrome / FF中'this'的不同内容

1 个答案: