Thank you kind sir. You just made my day. There was two similar
calls in that plugin one for click and the other for double click. It
was taking 16+ seconds and is now a respectable 300ms.
Josh
On Jul 5, 11:03 am, "Dan G. Switzer, II" <[EMAIL PROTECTED]>
wrote:
> Josh,
>
>
>
> >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?
>
> It's definitely faster to bind the click behavior to the entire table and
> use the event object passed to your callback to determine whether or not to
> perform the behavior.
>
> // bind an onclick event to the entire table
> $("#table").bind(
> "click",
> function (e){
> alert(e.target);
> }
> );
>
> The above function will tell you which element got click on in your table.
> The one "gotcha" is you need to do some parsing to actually find the parent
> element you want. I've used something like:
>
> /*
> if the current element is not the one we wants, search the
> parent nodes for a match
> */
> function findTarget(el, selector){
> var jel = $(el);
> return (jel.is(selector)) ? jel : jel.parents(selector);
>
> }
>
> Now you can use something like:
>
> // bind an onclick event to the entire table
> $("#table").bind(
> "click",
> function (e){
> // alert the parent <tr /> element
> alert(findTarget(e.target, "tr"));
> }
> );
>
> -Dan
>
> PS - The findTarget could easily be re-written into a jQuery plug-in.
