Question

I have a web page with a lot of list elements (close to 3000). I am attaching a click event handler for these and a hover event as well (using jquery).

$('li').click(function (e){
    // do processing here 
}) 

$('li').hover(function (e){
    // do processing here for hover in 
}, function (e) {
    // do processing here hover out 
}) 

On IE8, I am starting to notice some slowdown, and my initial guess is that the number of event handlers is causing a memory leak/consumption issue. This works great in Chrome, FF, IE9.

Has anyone else noticed this behavior?

I was also thinking that using jquery delegate would solve this issue, since the event handlers would live in the parent container, and not one for each list element. Something like the following-

$("#somecontainer").delegate('li', 'click', function () {
    //do processing for click here. 
})

Any insight into this is greatly appreciated. Thanks!

Answer 1

I was also thinking that using jquery delegate would solve this issue,
since the event handlers would live in the parent container, and not
one for each list element.

Absolutely. Or do it the “new” way:

$("#somecontainer").on("click", "li", function () {
    //do processing for click here. 
});