Question

How can I reference specific DOM element to specific JS object?
For example, i have an array of customers. Using jQuery, for each customer I create LI with checkbox and span for customers name. When checkbox is clicked, I need to do some processing on that customer JS object. The question, how i can get this JS object an easy way.
Currently I have following:

$(customers).each(function(){
$("<li>").append($("<input type=\"checkbox\"").attr("id","chk_" + this.ID)).append($("<span>").text(this.Name)).appendTo("#ulCustomers");
});

$("#ulCustomers input[type=checkbox]").bind("click",function(){

var customerId = $(this).attr("id").replace("chk_","");
var CustomerObj = $(customers).filter(function () { return this.ID == customerId }).get(0);

myProcess(CustomerObj); //Two above two lines are just for select correct customer from array.
});

I believe in world of JS and jQuery exists more elegant way to do it.
Thanks

Answer 1

You can use jquery data function

$(customers).each(function() {
    var elem = $("<li><input type='checkbox'><span>" + this.Name + "</span></li>").appendTo("#ulCustomers");
    elem.find("input").data("customer", this);
});

$("#ulCustomers input[type=checkbox]").click(function() {
    var CustomerObj = $(this).data("customer");
    myProcess(CustomerObj);
});