Typically in jQuery when you bind an HTML element with some event this event is fired every time the user (client) triggers it. Thus when you’ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let’s imagine the following scenario.

1. The user clicks on a “vote” button.
2. Some AJAX calls are performed.
3. After a successful AJAX call you setup a cookie to deny further votes from this machine.

This seems to be pretty well known scenario, but as the click event is attached to the button there is enough time to click several times on the “vote” button and to vote several times. In this case before the cookie is set the user can vote more than once.

Demo

So one possible solution is to unbind the click event. In jQuery terms this is done by …

$.unbind()

With this method you can simply unbind the “click” event or whatever event there is attached on the desired HTML element. So now in the first case we had:

$(document).ready(function() {
    $('input').click(function() {
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!
');
               }    
        }); 
    }); 
});

Now you can replace the code above with:

$(document).ready(function() {
    $('input').click(function() {
        $('input').unbind();
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!
');
               }    
        }); 
    }); 
});

As you can see on the demo here now the button cannot be clicked more than once.

Demo

Cookies + unbind()

There is a problem however. After reloading the page the event is attached again, so the user can click on the button once more. The obvious solution is to combine both the cookie and the unbind() as shown in the following pseudo code.

$(document).ready(function() {
    if (cookie is not set) { 
        $('input').click(function() {
            $('input').unbind();
            $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
                   , success : function() {
                        $('p').append('You\'ve voted successfully!
');
                        set cookie
                   }    
            }); 
        });
    } 
});

JQuery is one of the most famous JavaScript library online. There are so much articles in the web about it, that I feel useless to describe it again. The good parts of that library is the amazing way it handles the DOM. It is so good at that that I usually use it with other JavaScript libraries.

Now I’m working on a task and one of the main target of the completed task was the RAM usage of the code. It just has about 100 dynamic DOM elements which on every event should be removed form the tree and the RAM should be freed.

Unbind first

The first simple sub-task was to remove the event listeners. The problem is that if you don’t remove the event listeners may result in memory leaks in JS. The way JQuery removes the event listeners is with:

$(element).unbind()

That’s enough. Now the element don’t have any event listeners attached to it.

Remove

Now you must just remove the element from the tree with no fear of memory leaks, with just writing:

$(element).remove()