.unbind() accepts a string describing the event type to unbind.

Syntax

.unbind([eventType[, handler]]): eventType: A string containing a JavaScript event type such as click or submit. handler: The function that is to be no longer executed
.unbind(event): event: A JavaScript event object as passed to an event handler

Return value

The jQuery object, for chaining purposes.

Description

Remove a previously-attached event handler from the elements.

Any handler that has been attached with .bind() can be removed with .unbind(). In the simplest case with no arguments, .unbind() removes all handlers attached to the elements.

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

This version removes the handlers regardless of type.

To be more precise, we can pass an event type.

$('#foo').unbind('click');

By specifying the click event type, only handlers for that event type will be unbound.

The following code remove action handler by function


var handler = function() {
 alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

To unbind a handler, we need a reference to that function.

$("selectorHere").unbind("mouseover");

This removes all events of type mouseover from the selected elements.

Using namespaces

We can namespace the events and use this capability to narrow the scope of our unbinding actions.

namespaces are defined by using a period (.) character when binding a handler.

$('#foo').bind('click.myEvents', handler);

When a handler is bound in this fashion, we can still unbind it the normal way.

$('#foo').unbind('click');

To avoid affecting other handlers, we can be more specific.

$('#foo').unbind('click.myEvents');

If multiple namespaced handlers are bound, we can unbind them at once.

$('#foo').unbind('click.myEvents.yourEvents');

This syntax is similar to that used for CSS class selectors; they are not hierarchical. This method call is thus the same as the following:

$('#foo').unbind('click.yourEvents.myEvents');

We can also unbind all of the handlers in a namespace, regardless of event type.

$('#foo').unbind('.myEvents');

Examples

Unbind click event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               function aClick() {
                  $("div").show().fadeOut("slow");
               }
               $("div").click(function () {
                  $("div").unbind('click', aClick).text("Does nothing...");
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Unbind all events from div

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("div").unbind()
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Without any arguments, all bound events are removed.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            function aClick() {
              alert("action");
            }
            $("#bind").click(function () {
              $("#myButton").click(aClick).text("Binded");
            });
            $("#unbind").click(function () {
              $("#myButton").unbind('click', aClick).text("Not Binded");
            });
        });
    </script>

  </head>
  <body>
    <body>
          <button id="myButton">Not Binded</button>
          <button id="bind">Bind Click</button>
          <button id="unbind">Unbind Click</button>
    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: