jQuery bind() and unbind() – attaching event handlers

jQuery bind() function is used to attach one or more event handler to elements, while the unbind() is used to removes an existing event handler from elements.

As of jQuery version 1.7, jQuery on() method is the preferred method rather than jquery bind and unbind for attaching event handlers for selected elements.

bind() :

A basic usage of .bind() is:

$( "#elementID" ).bind( "click", function() {
console.log( "User single clicked" );
});

$("#elementID").bind("dblclick", function () {
console.log( "User double clicked" );
});

Alternatively, you can combine the code like following:

$("#elementID").bind({
click : function(){
console.log( "User single clicked" );
},
dblclick : function(){
console.log( "User double clicked" );
}
});

Read Also: Using Delegate and Undelegate in jQuery

You can pass a custom parameter data to the bind() function as below:

var message = "Message passed to jQuery!";
$( "#elementID" ).bind( "click", {
msg: message
}, function( event ) {
console.log( event.data.msg );
});

See more from jQuery documentation.

unbind() :

The unbind() method removes previously attached event handlers from selected elements.

The below example detached the “click” and “dblclick” event from elements with an Id of “elementID”.

$('#BoxId').unbind("click");
$('#BoxId').unbind("dblclick");

As of jQuery version 1.7, jQuery off() methods are preferred method for removing event handlers for selected elements.

See more from jQuery documentation.