Remove specific jQuery click event from element

Question

I understand event can be removed from an element by using .unbind() or .off(). However I am wondering if is that possible to remove specific click event and leave others attached. For example assuming I have a element with two events attached as follow:

$("#MyDiv").click(function() {
alert("I am first Event");
});

$("#MyDiv").click(function () {
    alert("I am second Event");
});

Is that possible to remove First event and leave second one attached, using some sort of key?

Answer 1

You can use event name spacing and .off()

$("#MyDiv").on('click.first', function () {
    alert("I am first Event");
});

$("#MyDiv").on('click.second', function () {
    alert("I am second Event");
});

$("#MyDiv").off('click.first');

Demo: Fiddle