Why does IE add a jQuery attribute for server-side element with mouseover handler?

This isn’t a crucial piece of knowledge for me, but I would still like to know what exactly is happening here.

This is a .NET 3.5 Web Forms application. One of the pages has 3 server-side inputs with type ‘submit’. Each one of these inputs has the following JavaScript handlers assigned to them with jQuery:

  $('.button').mouseover(function() {
    $(this).addClass('hoverEffect');
  });
  $('.button').mouseout(function() {
    $(this).removeClass('hoverEffect');
  });

When I run the following script (yes, this is IE specific)

  $(document).ready(function() {
    d = window.open();
    d.document.open('text/plain').write(document.documentElement.outerHTML);
  });

on the page, I get the following mark-up for the buttons:

<INPUT class=button id=ctl00_CloseButton onclick=window.close(); type=submit
       value=Close name=ctl00$CloseButton jQuery1287434381268="2">

The question is, what exactly is this jQuery1287434381268=”2″?

These values go from 2 to 4. So, the first button is 2, second is 3 and third is 4. The 1287434381268 number is different every time I reload the page. I know it’s got everything to do with the 2 JavaScript handlers, because if I remove them the attribute is no longer there. Is this some way how IE handles jQuery assigned handlers? If I do plain View->Source in IE, this stuff doesn’t come up as it doesn’t in FF Page Source or FireBug.

EDIT: I just ran that start-up script on a different page, which has tons of JavaScript handlers all assigned with jQuery. This attribute is present on every element that has a handler.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It’s the jQuery expando attribute, it’s the key in the jQuery.cache object that represents that element’s data and events collections.

In your example, in that page jQuery.cache["2"] would give you the same as $("#ctl00_CloseButton").data(), when you add an event handler or data and the object doesn’t already have one, it gets a new expando (jQuery.expando) attribute with the next number in the sequence as the value.

The reason this is done is primarily for IE, assigning handlers or data objects directly to the element makes the garbage collector behave very poorly, attaching them with this key, but no direct reference link, there’s no loop and the garbage collector behaves much better.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0