Why Does My Form Element Have A Random Jquery Attribute?

I'm using Approval Tests and WatiN to test the integration of my ASP.NET MVC2 pages. WatiN launches IE to hit the given URL and then gives me the browser's html response in a varia

Solution 1:

That's the uuid/jQuery.expando that jQuery adds to every DOM element it interacts with, to work around browser memory leaks.

Older style code waited for window.onunload to unbind Javascript data from DOM tags to prevent memory leaks. JQuery avoids this by using a simple number (like the one in your code example) in an attribute and then keeping a hashmap in Javascript of tags and numbers (which it calls the uuid).

The weird attribute name is the value of jQuery.expando, which you can search for easily in the code and see it's set to a random value each time. This is done to allow multiple copies of jQuery to coexist on the page without interfering with each other.

I'm not aware of a use case I've ever needed where I need more than one jQuery on the same page, and I suspect you don't need this functionality either - you could easily resolve this by just eliminating this feature. Modify the code to set jQuery.expando to some hard-coded value, like 'jquery', instead of a random number, and you're good to go.

Be careful not to ever use jQuery twice in the same page though! Although doing so by accident introduces a lot of other strange side effects as well (like reuse of $), so that point may be moot.

I go into a little more detail about jQuery.expando/uuid in this question: Why Doesn't JQuery Expose its UUID Functionality?

You'll notice in that write-up that the value of the attribute is random-ish - it's a counter based on how many tags have been interacted with by jQuery so far. If your code requires the attribute value to be consistent, you may still run into trouble.

Update

You'll need to modify your jquery source. For example, 1.6.2: http://code.jquery.com/jquery-1.6.2.js

Includes the following:

jQuery.extend({
    cache: {},

    // Please use with cautionuuid: 0,

    // Unique for each copy of jQuery on the page// Non-digits removed to match rinlinejQueryexpando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

You can change the expando line as follows:

// Does not support multiple copies of jQuery on the same page!// 0 included to match rinlinejQuery (/jQuery\d+/)
    expando: "jQuery0",

Solution 2:

I believe it is what jQuery does internally to track all of the elements in the DOM that you have jQuery events wired up for. You might not be able to remove them without unhooking the events.