Unbind event in jQuery

by Ivan Gerasimenko

HTML

<h4>Open console log, please</h4>
<input type='button' value='Click me!' id='button1' />
<input type='button' value='Unbind event 2!' id='button2' />
<input type='button' value='Unbind event 3!' id='button3' />

JavaScript

$('#button1').on('click', function() { console.log("event 1"); });
$('#button1').on('click.eventNamespace2', function() { 
    console.log("event 2"); 
});

function event3() { 
    console.log("event 3"); 
}

$('#button1').on('click', event3);

// unbind event by namespace (anonimous function, we can't use it's name)
$('#button2').on('click', function() {
    console.log('--event 2--unbinded');
    $('#button1').off('click.eventNamespace2');
});
// unbind event by function link
$('#button3').on('click', function() {
    console.log('--event 3--unbinded');
    $('#button1').off('click', event3);
});