.unbind()

Syntax and Description

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


.unbind([eventType[, handler]])
.unbind(event)

eventType is a string containing a JavaScript event type such as click or submit. handler: The function that is to be no longer executed.
event is a JavaScript event object as passed to an event handler.

Return value is the jQuery object, for chaining purposes.

unbind method removes 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(); 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() {/*w w w . ja v  a2 s  .c  o  m*/
   alert('Hi from java2s.com.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

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

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

The code above 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');

Unbind click event

The following code unbinds click event.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w  w w.j a  va  2s  .com-->
               function aClick() {
                  $("div").show().fadeOut("slow");
               }
               $("div").click(function () {
                  $("div").unbind('click', aClick).text("Does nothing...");
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>java2s.co m</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Unbind all events from div

The following code unbinds all events from div.

Without any arguments, all bound events are removed.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w w .jav a2 s  . c  o  m-->
               $("div").unbind()
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>ja va2s.com</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Unbind an event handler function


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w w w.ja  v  a  2  s  . c  o m-->
            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

The code above generates the following result.