Question

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 sluggishly 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 with 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.

Answer 1

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.