Main Tutorials

jQuery bind() and unbind() example

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

Examples

Simple html code for the demonstration.


<div id="BoxId">
	Mouseover Me, Click Me or Double Click Me
</div>
<span></span>
 

1. bind()

jQuery has full supports of the JavaScript event types such as “click” , “dblclick” or custom event names.

Bind a single click event to elements with an Id of “BoxId”.


$("#BoxId").bind("click", (function () {
	$('span').text("Single Clicked");
}));

Bind a double click event to elements with an Id of “BoxId”.


$("#BoxId").bind("dblclick", (function () {
	$('span').text("Double Clicked");
}));

2. bind() + event object

jQuery comes with many event objects to get more information about the user’s environment, check here for jQuery event object details.

Bind a ‘mouseover’ event with an event object parameter to elements with an Id of “BoxId”.


$("#BoxId").bind("mouseover", (function (event) {
	$('span').text('The mouse cursor is at ('
	+ event.pageX + ', ' + event.pageY + ')');
}));

3. bind() + event data

It’s means pass a custom parameter data to your bind() function.

Bind a single click event and pass a custom message as parameter to an elements with an Id of “BoxId”. Inside the function, you can access the parameter message with the help of event.data.


var name = 'Message pass by jQuery event data';
$("#BoxId").bind("click", {msg: name},(function (event) {
	$('span').text("Single Clicked - " + event.data.msg);
}));

4. bind() + Multiple events

To bind a multiple events together, you can include each one separated by a space.

Bind single click and double clicks events to elements with an Id of “BoxId”.


$("#BoxId").bind("click dblclick", (function () {
	$('span').text("Single Clicked");
}));

Alternatively, you can also code like following : (Supported in jQuery 1.4).


$("#BoxId").bind({
	click : function(){
		$('span').text("Single Clicked");
	},
	dblclick : function(){
		$('span').text("Double Clicked");
	}
});

5. unbind()

Unbind or detached the existing events is quite easy, just need to specified the attached event type.

Detached the “click” and “dblclick” event from elements with an Id of “BoxId”.


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

Try it yourself


<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	.ClassA{
		padding:8px;
		border:1px solid blue;
	}
	span{
		color:#CC6633;
	}
</style>

</head>
<body>
  <h1>jQuery bind() and unbind() example</h1>

  <div id="BoxId">
	Mouseover Me, Click Me or Double Click Me
  </div>
  <span></span>
  <p>
  <button id="bindButton">bind()</button>
  <button id="bindMessageButton">bind(message)</button>
  <button id="unbindButton">unbind()</button>
  </p>
  
<script type="text/javascript">
	
    $("#BoxId").bind("click", (function () {
		$('span').text("Single Clicked");
    }));
	
    $("#BoxId").bind("dblclick", (function () {
		$('span').text("Double Clicked");
    }));

   //Event object
   $("#BoxId").bind("mouseover", (function (event) {
		$('span').text('The mouse cursor is at ('
                 + event.pageX + ', ' + event.pageY + ')');
    }));

    //Passing event data
    $("#bindMessageButton").bind("click", (function () {
		var name = 'Message pass by jQuery event data';
		$("#BoxId").bind("click", {msg: name},(function (event) {
			$('span').text("Single Clicked - " + event.data.msg);
     }));
    }));

    $("#unbindButton").bind("click",(function () {
		$('#BoxId').unbind("click");
		$('#BoxId').unbind("dblclick");
		$('#BoxId').unbind("mouseover");
		$('span').text("");
    }));

    //added since version 1.4
    $("#bindButton").bind("click",(function () {
		
		$("#BoxId").bind({
			click : function(){
				$('span').text("Single Clicked");
			},
			dblclick : function(){
				$('span').text("Double Clicked");
			},
			mouseover : function(event){
				$('span').text('The mouse cursor is at ('
                                + event.pageX + ', ' + event.pageY + ')');
			}
		});
    }));
	
</script>
</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Paul
10 years ago

Why not chain more?

$(‘#BoxId’).unbind(“click”);
$(‘#BoxId’).unbind(“dblclick”);
$(‘#BoxId’).unbind(“mouseover”);

.. should be:

$(‘#BoxId’).unbind(“click”).unbind(“dblclick”).unbind(“mouseover”);