jQuery and clearing event listeners

3
votes

I have a self-authored, in-house grid that displays a set of data and subscribes to several events, (eg. row click event, column click event). Every time the grid building function is called the first line of code is $grid.empty(), which should not only physically empty the grid of it's DOM elements, but also unbind these events. My graph below is showing a slow, but steady incline of event listeners. The upswing is data being loaded into the grid and events being wired up. It's growing an average of 10-11 event listeners per query. Not horrible, but in the course of an hour it makes the application unusable. Am I missing something or looking down the wrong path? Any help is appreciated.

Event Listener Graph in Google Chrome Dev Tools

More information: I've found that my jQuery function call is not clearing a variable at the end. Example:

$.fn.myCustomFunction = function(parm) { var grid = this; {some more code, AJAX call };

I need a grid = null at the end. However, because of it's context, it empties my grid completely.

1
jqueryeventsevent-listener
I'm not sure why this is happening, but you might look into using on() with delegation so the listeners only need to be bound once. - Jason P
Are your events tiered? You may need to halt some event listener propagation. - DevlshOne
Clearly, you should use delegation here - A. Wolff
The project has had 3 hands in it, and I'm seeing inconsistencies in event handling... (eg. obj.click(...), obj.on("click", ...), obj.live("click", ...). Back to some experimenting. Thanks!! - AK76
@AlexKail live() is deprecated as of 1.7. Also, there is an important difference between obj.on('click', function() { }) and obj.on('click', 'selector', function() { }). Make sure you understand the difference, as that may be your issue. - Jason P

1 Answers

1
votes

Using delegation:

$grid.on('click','tr',function(){
    //code stuff here
});