[jQuery] attaching events to large table
I have a table that has 1,000 rows and I'm trying to bind a function
to the click event of each row. This can be quite slow the way I'm
currently doing it. Here is an example my my current process:
this.find(settings.selector).click(function(){selectRow(this);});
function selectRow(row){
if(row && !jQuery(row).is("."+settings.selectedClass)){
table.find(settings.selector
+"."+settings.selectedClass).removeClass(settings.selectedClass);
jQuery(row).addClass(settings.selectedClass);
if(settings.selectFunction)
settings.selectFunction(row);
}
}
settings.selector = "tbody tr", this=table = $("#test"),
settings.selectedClass="selected", settings.selectFunction =null
This can take 8 seconds or more and will cause IE to display the long
running script dialog on my test machine.
So, now my question. Since I need to do an action on the click event
of each row, is it best to bind a function to each row separately, or
is there someway to bind a function to the click event of tbody and
then figure out the row somehow?
Also, does anybody see anything stupid with the code above that would
invoke such a slowdown?
Thank you in advance
Josh