Question

I’ve discovered a resource leak on a webpage I’m working on.

This webpage has two textfields, that upon click show a modal dialog, perform a data request to the backend, and then present that information in a table that the user can select an entry from for use in the textbox they originally clicked.

I’m binding the click events to the textboxes like so:

var $field = $('#one-of-the-text-fields');

$field.click(function () {
        App.DialogClass.show();
        App.DialogClass.PopulateTable();
        App.DialogClass.GotoPageButtonAction(actionArgs);  // Offender!
});

…Which calls…

App.DialogClass = (function($) {

var pub {},
    $gotoPage = $('#pageNumberNavigationField'),
    $gotoPageButton = $('#pageNumberNavigationButton');

// ...SNIP unimportant other details...

pub.GotoPageButtonAction = function (args) {
    $gotoPageButton.click(function () {
        var pageNumber = $gotoPage.val();
        pub.PopulateTable(args);   // Breakpoint inserted here...
    });
};

return pub;

})(jQuery);

I noticed the leak because when I ran through using Chrome’s JavaScript debugger, I’m always having one extra breakpoint hit every time I click a different button (e.g. the first time I click field A, the breakpoint is hit twice. When I hit field B after that, the break point is hit three times. If I click A after that, the breakpoint is hit four times. Extrapolate as necessary.)

Nowhere in my code am I doing anything about an existing click event for a given field. I suspect my leak stems from the fact that the events are not getting cleaned up. That being said, I am also not terribly familiar with JavaScript/jQuery. What are some techniques for removing click events from a control?

Answer 1

Sure. Just unbind them:

$field.unbind('click');

However, bear in mind that this will remove all event handlers for click, not just yours. For safety, you should use namespaces when binding handlers:

$field.bind('click.mynamespace', function(){
    // do something
});

Then,

$field.unbind('click.mynamespace');

So, then, only your handler will be removed.