All geek questions in one place

JQuery v1.7.1, various 'this' content in IE and Chrome / FF

I'm not sure if this is a bug in jQuery, FF / Chrome or IE or just the expected behavior. Unfortunately, I don't know jQuery to tell if the following script should produce the same results in 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 does he do:

  • Assigns a handler to dispatch the event to form the "login" contained in the div "#c"
  • The event handler form is serialized and displayed in the warning field.
  • The content of div "#c" has been changed to an empty line.
  • The form is serialized again, and the output line is displayed in the warning field.
  • The contents of the 'this' window is displayed in the warning field - it is empty in IE and has some html in FF / Chrome

The FF / Chrome warning blocks show:

  • Email = SSS & = PASSWORD
  • email = sss & password = pass // Same result as above, 'this' hasn't changed?

However, in IE9:

  • Email = SSS & = PASSWORD
  • ""//Empty line

Is this a bug in jQuery?

+4
source share
1 answer

I would say more about how the browser handles the .innerHTML property than the jQuery error (since jQuery calls innerHTML, which the browser will use to build / restore the DOM tree). See this example: http://jsfiddle.net/bhKCu/1/ (if it is a jQuery error that should behave the same no matter which browser uses innerHTML instead of $.html() on the right?).

From jQuery.html ():

This method uses the browser property innerHTML. Some browsers may not create a DOM that accurately replicates the provided HTML.

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; },
+1
source

Source: https://habr.com/ru/post/1400201/

More articles:


All Articles