I am seeing jQueryXXX="YY" attributes added to some of my DOM elements

Question

When I use the IE developer tools, some of the DOM elements have attributes added that are of the form jQueryXXXXXXXXX="YY" where XXXXX is a fairly long digit string and YY is a usually small integer value.

I don't see these with the DOM inspector on Safari.

Why and when are these added? Is the data useful to me in any way?

Answer 1

This is the jQuery expando attribute, it's a key on the object used to find it's entry in $.cache. $.cache is used for .data(), event handlers, or anything you want to stick in there, it's a centralized place to store events (makes firing global events easier/more efficient as well) and one place for cleanup. By carrying only the attribute on the element, it's not necessary to have a data store on each element which may not clone correctly-cross browser, rather it only maintains this key, and can lookup it's entry in the $.cache object at any point.

Let's take an example:

domElement[$.expando] //only works in 1.4+, expando was private previously

This will give an "ID" or key of sorts, that key corresponds to the property on the $.cache object that stores this element's data/events (if it has any data/event handlers). For example if the key was "4", it would be used internally to access $.cache[4].

$.cache contains all data, event handlers, etc for all elements that were assigned by jQuery. It's assigned by incrementing the $.uuid (an internal ever climbing ID jquery assigns and increments any time a new object's added into $.cache).

---

A few extra bits:

The random nature of the name isn't all that random, the jQueryXXXXXXXXXXXXXXXXX is just jQuery + the timestamp then jquery was loaded, to give the attribute a unique hopefully non-colliding name.

Why don't you see it with .html()?, well because jQuery hides it, it does a regex to strip it out.

Note: $.expando isn't exposed in 1.3, only 1.4+.

---

Usage:

Is it useful? Well it can be, for example if you analyze $.cache in your console, and you see you have a memory leak (no .empty() before many .load() calls, leaving event handlers behind for example). You open your console, and do $.cache, you see 500 entries there, let's say you want to know which object went with 312, then you can select it, like this:

$("[" + $.expando + "=312]")[0] //DOM element for this entry

As another example, this:

$("#myElem").data('events') //get events object, equivalent to:
$.cache[$("#myElem")[0][$.expando]].events

This is one example that's handy, typically the average jQuery user does't need to dive into $.cache or how it works, but it is there and available in case you never need to go looking. Just run $.cache in your console, there's likely a wealth of information about all your handlers that you didn't know was available :)