jQuery attribute auto added to elements

Question

After using the IE8 built in Developers Tools for the first time, I noticed jQuery is attaching an attribute to some of my elements:

I've never noticed this before. In fact, this doesn't show up in Firebug... I'm only seeing it for the first time now in IE8 Developer Tools. Does anyone know what jQuery uses this for, and why it's hidden in firebug?

Answer 1

I doubt it's hidden in firebug, as I've seen jquery data object within that as well.

I believe that jQuery or whatever plugin you're using just adds that in IE as a fix/workaround for various browser specific bugs/shortcomings.

Answer 2

jQuery uses this "expando" to bind data and events to objects. It looks like it works along with a data and event cache. I'd love to hear a more in-depth explanation, though.

Answer 3

If you use jQuery’s .html() method to find a string of HTML, beware if that HTML contains any elements that have events registered—you might get a little more than you bargained for.

Don’t depend on .html() for well-formed XML snippets.

My quick fix was to change the order of business. I simply did my jQuery event binding after the data had been sent. A hard lesson learned, then, in view of the amount of time I spent tearing my hair out, but an important one nonetheless.

I am guessing your are using 1.3.1 which the issue has been fixed in later versions. So just update and probabaly you will be fine.

Answer 4

The jQuery source is pretty easy to read, and you can look at what the data function is doing.

To summarize:

• jQuery has a variable called 'expando' which is 'jQuery'+(+new Date)
• jQuery has another variable called uuid which starts with "1"
• jQuery.cache is an empty object

• Setting/Getting any "data" on a HTML Element/Object will use the expando property on the object to store a reference into jQuery.cache -- sort of like this:

  // get the elements cache id, or create a new cache id:
  var id = elem[expando] || (elem[expando] = uuid++);
  // get the cache for the element, or create it:
  var data = jQuery.cache[id] || (jQuery.cache[id] = {});
  

• Event Handlers are stored in the events and handle properties of this internal data object.

So, internally all properties that are assigned using .data() use this "expando" attribute on the HTML to store a key into jQuery's internal data cache. jQuery event handlers are also stored in this same cache. The numeric value assigned to the expando is an incrementing counter that references its location in the jQuery cache object.