asp.net - javascript function "createCallback" called >50 times when I use addClass/removeClass in Firefox -

i'm working on web app in asp.net 2.0 involves several gridview elements. when users click 1 of rows in grid, row needs show selection changing color. each row has attributes set identify record type , unique id:

<tr data-elementtype='mytype' data-myid='12' onclick='selectionfunction();'></tr> 

i accomplish selection through javascript onclick handler on each row calls function that:

• removes selected class selected row
• adds selected class new selected row
• updates value of hidden field new selected unique id server-side code can know element perform action on when button clicked (view, delete, etc).

one of these grids has on 700 records in it. in firefox 3.6, selection operation on grid horribly slow (about 2 seconds); in other browsers (even ie 7 , 8) it's not problem. put console.log statements @ start , end of selection function, , in firebug show fast @ end of delay, suggesting it's not selection function slowing things down. used profiler in firebug , says "createcallback", defined in 1 of "scriptresource" script files generated asp.net, taking huge majority of time. createcallback , why seem slow in firefox 3.6? bug in ff, or problem can solve?

update: am, of course, using jquery add/remove classes rows. i've been working jquery 1.5.2 , jqueryui 1.8.11, updated latest (1.6.2 , 1.8.14 currently) no avail. tried putting breakpoint in createcallback see it's getting called, , when breaks there it's several frames down in call stack call removeclass. here stack looks in firebug:

createcallback() - in scriptresource.axd?......

wherever possible trim: trim ? function(text=" ") - in jquery

removeclass(value="selectedrow") - in jquery

removeclass(classnames="selectedrow", speed=undefined, easing=undefined, callback=undefined) - in jqueryui

selectionfunction() - in .aspx page

onclick

i don't understand why jquery triggering asp.net generated function this.

update 2: more investigation has provided more detail. seems "createcallback" function getting called lot when use addclass/removeclass, , it's happening in both firefox 3.6 , firefox 5. found same function in chrome , put breakpoint on it, , it's not getting called @ all, seems firefox thing. put breakpoint on function/line in question , selected row, , breakpoint got 57 times. first 2 involved me calling removeclass , addclass; rest had createcallback several times in callstack, , beginrequesteventargs too. i've noticed getting called when mouseover other jqueryui stuff on page (tabs), when jquery uses addclass , removeclass. why getting called many times when work on tr elements?

i'm changing title , tags reflect real issue.

update 3: createcallback getting called same number of times whenever select row in of grids, if has 6 rows in it. in case it's not performance problem, , profiler shows taking 30% of execution time, while it's @ least 80% when profile selection on larger table. createcallback seems perform worse when it's used in context of more stuff visible on page. still seems jquery shouldn't cause call createcallback, since couldn't fine references @ in firebug's script search. , appears called in firefox!

note of these grids on same page, 1 visible @ once, because i'm using jqueryui tabs.

update 4: managed similar on jsfiddle requested. see here. in firebug, find createcallback , set breakpoint (just below click handler in script, begins function.__typename = "function"; function.__class = true; function.createcallback = function (b, a) , reload page. lot of calls it.

i have little knowledge of asp sounds problem purely client side.

declaring on "onclick" event each row not sensible way handle rows being clicked. when quantity of rows you're talking (~700+).

a better way add click event handler table , figure out clicked when happens. have written application similar size table being handled , we're not seeing lag you're experiencing upon click. there may other factors causing click events slow down still suggest along following lines worth implementing in case:

$(function(){     var rowselectedclass = 'rowselectedclass';     $('#mytableid').click(function(e){         if(e.target.nodename === 'td'){             var $tr = $(e.target).parent();             $('tr.' + rowselectedclass).removeclass(rowselectedclass);             $tr.addclass(rowselectedclass);              // ....             // whatever else want when row clicked             // ....          }     }); } 

a article take @ advocates method (and few other handy jquery tips) can found here: http://www.artzstudio.com/2009/04/jquery-performance-rules/#leverage-event-delegation

also worth noting if table has rows added dynamically after page loaded consider using .live() instead of .click().

update @ july 28th 2011 9am
having taken @ source more closely, think supposed calls "createcallback" red herring. line within original jsfiddle source contains "createcallback" function long string (~90,000 characters) of javascript. think fact "createcallback" first function within string misleading firebug's profiler. when profile original page's load, there 2261 calls , said, there appear lots "createcallback"

i've "beautified" (hate phrase) long js string via http://jsbeautifier.org/ make readable , re-added jsfiddle page. can see here: http://fiddle.jshell.net/kvpme/1/show/. when profile page's load you'll see similar number of calls (2267 - not sure happened other 6!) importantly not single 1 "createcallback".

i still can't offer solution though because i've been unable re-create original issue there 2 second lag in firefox 3.6 when clicking row.

is still problem you're having?

could try , see whether can re-create problem within updated jsfiddle page?

also try , add de-minified js page see if helps track down actual functions being called when row clicked , therefore lag taking place.