jQuery On event Off unbind automatically

Question

Is there a way to automatically unbind all "on" events that were set on an element? I have found a solution but i don't know if it is the corect one.

$(document).off('click', 'li').on('click', 'li', function(e){
    e.preventDefault();
    // some stuff goes here
});

EDIT:

I have tried all the suggested answers but none worked as i wanted. Maybe it was my mistake that i didn't give enough information: the point is that all my content is loaded dynamically like in tabs and some tabs could be loaded more time.

I have tried this $('li').off().on('click', function(){ }); -> did not work

Also have tried this $('li').unbind().on('click', function(){ }); -> did not work.

Answer 1

You can just use unbind() or off() to remove all event handlers from an object.

$('#myNode').unbind();

off() is preferred way to do this in jQuery 1.7+ (noted by @ Krishna ).

$('#myNode').off();

JSFiddle

Answer 2

You can call .unbind() without parameters to do this:

$('li').unbind();

From the docs :

In the simplest case, with no arguments, .unbind() removes all handlers attached to the elements.

As of jQuery 1.7, off() and on() are the preferred methods to bind and unbind event handlers.

So to remove all handlers from an element, use this:

$('li').off();

or for specific handlers:

$('p').off('click hover');

And to add or bind event handlers, you can use

Answer 3

$('li').off();//Remove all event handlers from all li elements:
$('li').off('click');//Remove specific event - click

From documentation .off() ,

The .off() method removes event handlers that were attached with .on().

From .unbind() documentation,

As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements.

$('li').unbind(); //removes all event handlers
$('li').unbind('click');//removes specific event - click