views:

177

answers:

2

I have a page where I load a table of information using ajax. Once the table is loaded I use jquery to wire up some event handlers on the table's rows.

From that page it's possible for the user to refresh that table. My jquery code to refresh the table looks something like this:

    $.post("/myurl", { id: 0}, 
        function (d) 
        { 
            $("tblWrapper").html(d);

            //Wire events
            $("table tr", $("tblWrapper")).click(function (e) { ... });
            ...etc
        }, "text");

I've noticed that after doing this several times that the page will respond very slugishly when I try to do any scrolling or animation in IE8.

My question is, what am I doing wrong, that makes it get slower and slower? Can I clean up the old html/event handlers before replacing it w/ new html and new handlers? I had thought JS engine might do that automatically. Maybe it does and its just slow to do the cleanup, it I don't know.

I've noticed CPU time on IExplorer goes to like 50%.

I'd greatly appreciate any help.

A: 

Good discussion and potential solution for the problem here:

http://forum.jquery.com/topic/performance-issues-using-ajax-async

Nissan Fan
A: 

I'm not sure if this is the problem or not, but do you keep adding the same rows over and over? It could be getting slower because there are more and more rows in the table.

You can do something like $("table tr").remove() to clear the rows.

mdm20
No, the content of tblWrapper are replaced w/ the new html from the ajax call each time. But I don't know if the old event handlers are not getting cleaned up or I'm keeping a reference to a jquery object somewhere. I was hoping there was a pattern for this type of situation that I could follow to prevent the problem.
I would try removing the existing rows first using the .remove() function, before repopulating the content. That will remove all handlers per this: http://api.jquery.com/remove/
mdm20
OK that does sound promising. I'll give it a shot and post back.
OK, I've added the remove logic. It didn't fix the problem but it makes me feel better having it :)I see the problem now was that there's an event handler on window.resize that resized the table's content and that needed to be unbound from window before loading in another table.Thanks.