I have two methods to bind data in jquery so that the click event can access it, which is most efficient?

Question

Outline

My simple application takes text from a text box and calls an asp.net page method using AJAX. A list of users that partially match that text and their userID is returned. I wish to fill an existing DIV on the page with a DIV for each result, containing the users name. Each DIV then needs a click event to be bound to it that can call a javasacript method that can then have access to the key - the userID.

Code

function SearchButtonHandler(event) {
    PageMethods.SearchInstructors($("#txtInstructorName").val(), SearchCallback);
    return false;
}

The text to search is passed to the ajax call and the SearchCallback method receives a json array of objects containing an integer 'UserID' and a string 'Fullname'.

This is the first way I did it, creating a 'fake' attribute on the DIV and having the click handler extract it:

function RowClicked() {
   alert($(this).attr("userid"));
}

function SearchCallback(data) {
    var collection = data.Result;

    if (collection.length == 0) { //tell the user there were none
        $("#resultlist").hide();
        $("#nonefound").show();
    } else {
        $("#nonefound").hide();
        $("#resultlist").empty();
        //method 1 below
        $.each(collection, function(index, item) {
            $("#resultlist").append($("<div></div>").html(item.FullName).attr("userid", item.UserID).click(RowClicked));
        });

        $("#resultlist").show();
    }
}

I don't really like creating 'fake' attributes but came up with the following method:

        $("#resultlist").append($("<div></div>").html(item.FullName).click(function() {
            alert(item.UserID);
        }));

So I have two alternatives that both work fine.

Question 1:

Is this second one less efficient? It seems to me that it needs to create a function for each DIV tag. Or is there another way to do it?

Question 2 (leading on from 1):

How is 'item' in scope when the click event is triggered? It clearly works, I just can't see how that can be in scope!

Answer 1

May I suggest a 3rd route? jQuery.data()

Building on your first idea:

function RowClicked() {
   alert($(this).attr("userid"));
}

function SearchCallback(data) {
    var collection = data.Result;

    if (collection.length == 0) { //tell the user there were none
        $("#resultlist").hide();
        $("#nonefound").show();
    } else {
        $("#nonefound").hide();
        $("#resultlist").empty();
        //method 1 below
        $.each(collection, function(index, item) {
            $("#resultlist").append($("<div></div>").html(item.FullName).data("userid", item.UserID).click(RowClicked));
        });

        $("#resultlist").show();
    }
}

Answer 2

You can use .data() and $.data() to store custom attributes, like this:

.data("userid", item.UserID)

Then fetch it like this:

alert($(this).data("userid"));

Or, a bit more efficient (not creating an extra jQuery object wrapper):

alert($.data(this, "userid"));

This stores the data in $.cache on the page, you already have the custom $.expando attribute on the element (to store the click handler that's also there), so you're not adding anything invalid, you're just using the expando data cache you already created.

Note: The $.expando variable above isn't accessible until jQuery 1.4+ when it was made "public"

---

Edit, moving tangential part of the explanation here:

You can investigate the $.cache object like this from an element (don't use this in code!, it's if you're curious/want to poke):

$.cache[this[$.expando]]

This is equivalent to $.data(this), $.expando is a generated property when the page loads, looking something like jQuery1281004831434 (jquery + timestamp on load) This is an attribute added to your element that's a key, for example: jQuery1281004831434="4", in that case the cache object has a entry called 4 that stores your elements data and events...since this was already created for your click handler, you might as well use it, if avoiding another custom attribute is your goal.

Answer 3

There is jQuery data, like the others said.

To address your second (and third) point:

Is this second one less efficient? It seems to me that it needs to create a function for each DIV tag.

You are not creating a new function for each DIV tag. They all get the same one. The click() function binds the exact same function object to the click event of all matched elements.

The same happens with each(), for example: You pass one function object and have it applied to all matched elements - you are definitely not creating a new function for each of them.

Also, I have no idea how that function has access to the 'item', how on Earth is that even in scope?

The item variable is - just like you suspect - not in scope. The this keyword is taking over that role:

$("#resultlist div").click(function() {
  alert(this.UserID);
});