.unbind()    **DEPRECATED** JQ Home  <<  Events  <<  .unbind()

Unbind event handler.

Description

The .unbind() method is used to unattach a previously bound event handler(s) from the specified elements.

  • The .unbind() method unattaches event handlers previously attached using the .bind() method.
  • Starting with jQuery version 1.7, more flexible event binding and unbinding can be achieved using the .on() and .off() methods. The .on() method allows us to attach event handlers directly to a document and is the preferred method to use when using this version onwards.

This method was deprecated in jQuery 3.0.

Syntax

Signature Description
.unbind( [eventType], [handler(eventObject)] )Unbind all event handlers from the specified elements, optionally passing a specified event type(s) and/or event handlers, to filter the unbinding.
.unbind( eventType, false )Unbind the corresponding return false function that was bound using .bind( eventType, false ).
.unbind( event )Unbind a JavaScript event object that was previously passed to an event handler.
.unbind( namespace )Unbind all events for a namespace.

Parameters

Parameter Description Type
eventTypeA string containing one or more DOM event types or custom event names.
  • If the string used for eventType is not the name of a native DOM event, the handler is unbound from a previously created custom event.
  • If a period (.) character is present anywhere in the eventType string, then that event becomes namespaced. The characters before the period (.) character represent the eventType, whilst the characters after the period (.) character represent the namespace. As an example .unbind('anEventType.aNamespace', handler) could be used to unbind some events whilst not affecting events for .unbind('anEventType.aNamespace2', handler). In essence, namespacing allows us to action certain events for an eventType without affecting other events for that eventType.
String
eventDataAn object of data to pass to the event handler.Object
handler( eventObject )A function to execute each time the event is triggered.Function
falseA boolean value:
  • false - Unattaches the function that was attached by the corresponding .bind( eventType, false ) action, that prevented the default action from occurring and stopped the event from bubbling.
Boolean
eventA JavaScript event object.Object
namespaceA string prefixed with the period (.) character.String

Return

A jQuery object.

.unbind( [eventType], [handler(eventObject)] ) Examples Events  <<  Top

Unbind all event handlers from the specified elements, optionally passing a specified event type(s) and/or event handlers, to filter the unbinding.

In the example below when we press the left button we fire off the event handler we bound to 'btn8' for the click JavaScript event. This will unbind all events and handlers attached to this button' turn the background colour of this button to aqua and output a message.

When we press the middle button we run the event handler we bound to 'btn9' for the click JavaScript event. This will unbind the mouseleave event only and turn the background colour of this button to olive and output a message.

When we press the right button we run the event handler we bound to 'btn10' for the click JavaScript event. This will unbind the mouseenter event and handler and turn the background colour of this button to red and output a message.


$(function(){
  $('#btn8').bind({
    mouseenter: function() {
      $(this).css('backgroundColor', 'yellow');
      $('#scrollspan4').append('**entering "btn8"');
    },
    mouseleave: function() {
      $(this).css('backgroundColor', 'orange');
      $('#scrollspan4').append('**leaving "btn8"  ');
    },
    click: function() {
      $(this).css('backgroundColor', 'aqua').unbind();
      $('#scrollspan4').append('**events for this button are now unbound"  ');
    }
  });
  $('#btn9').bind({
     mouseenter: function() {
       $(this).css('backgroundColor', 'fuchsia');
       $('#scrollspan5').append('**entering "btn9"');
     },
     mouseleave: function() {
       $(this).css('backgroundColor', 'silver');
       $('#scrollspan5').append('**leaving "btn9"  ');
     },
     click: function() {
       $(this).css('backgroundColor', 'olive')
              .unbind('mouseleave');
       $('#scrollspan5').append('**the mousleave event for this button has been unbound"  ');
     }
  });
  var ourHandler = function() {
    $(this).css('backgroundColor', 'teal');
    $('#scrollspan6').append('**entering "btn10');
  };
  
  $('#btn10').bind('mouseenter', ourHandler);
  $('#btn10').click(function(){
    $(this).css('backgroundColor', 'red')
           .unbind('mouseenter', ourHandler);
    $('#scrollspan6').append('**"mousleave" event/function for this button unbound  ');
  });
});

Press the button below to action the above code:

                       

We will show a message here for the left button.

We will show a message here for the middle button.

We will show a message here for the right button.

.unbind( eventType, false ) Examples Events  <<  Top

Unbind the corresponding return false function that was bound using .bind( eventType, false ).

In the example below when we press the left button nothing happens as we are preventing event bubbling by using the preventBubble boolean argument. This is equivalent to typing in function(){ return false; }. When we press the right button we remove this restriction by calling: .unbind( eventName, false ) and add some functionality to the left button. Click the left button again to see the new functionality.


$(function(){
  $('#btn11').bind('click', false);
  $('#btn12').click(function(){
    $('#btn11').unbind('click', false);
    $('#btn11').click(function(){
        $(this).css('backgroundColor', 'lime').unbind('mouseenter', ourHandler);
        $('#scrollspan7').append('**"click" functionality reenabled for "btn11"');
    });
  });
});

Press the button below to action the above code:

           

We will show a message here.

.unbind( event ) Example  Events  <<  Top

Unbind a JavaScript event object that was previously passed to an event handler.

In the example below we unbind the event object from the button below with an id of 'btn13' after the click JavaScript event has been fired three times. We then turn the background colour of this button to green and append a final message to the paragraph below.


$(function(){
  var clickCount = 0;
  $('#btn13').bind('click', function(event) {
    clickCount++;
    if (clickCount < 3) {
        $('#scrollspan8').append('**"click" pressed for this button: ' 
        + clickCount + ' times ** ');
    } else {
        $('#scrollspan8').append('**"click" pressed for this button: ' + clickCount 
        + ' times ** and the event object has now been unbound');
        $(this).css('backgroundColor', 'green').unbind(event);
    }
  });
;});

Press the button below to action the above code:

We will show a message here.

.unbind( namespace ) Example  Events  <<  Top

Unbind all events for a namespace.

In the example below when we move the mouse over the left button or away from the button we fire off the event handlers we bound to 'btn14' for the mouseenter and mouseleave JavaScript events. These handlers will change the background colour of this button and output a message.

When we move the mouse over the middle button or away from the button we fire off the event handlers we bound to 'btn15' for the mouseenter and mouseleave JavaScript events. These handlers will change the background colour of this button and output a message.

When we press the right button we turn the background colour of this button to blue, output a message and unbind the '.ns2' event handlers for the left and middle buttons. If you move the mouse over these buttons after pressing the right button you will notice how the the '.ns2' namespaced handlers no longer do anything. 


$(function(){
  $('#btn14').bind({
    'mouseenter.ns1': function() {
      $(this).css('backgroundColor', 'yellow');
      $('#scrollspan9').append('**entering "btn14"');
    },
    'mouseleave.ns2': function() {
      $(this).css('backgroundColor', 'orange');
      $('#scrollspan9').append('**leaving "btn14"  ');
    }
  });
  $('#btn15').bind({
     'mouseenter.ns2': function() {
       $(this).css('backgroundColor', 'fuchsia');
       $('#scrollspan10').append('**entering "btn15"');
     },
     'mouseleave.ns1': function() {
       $(this).css('backgroundColor', 'lime');
       $('#scrollspan10').append('**leaving "btn15"  ');
     }
  });
  $('#btn16').click(function(){
    $(this).css('backgroundColor', 'aqua');
    $('#btn14, #btn15').unbind('.ns2');
    $('#scrollspan11').append('**".ns2 namespace has been unbound ');
  });
});

Press the button below to action the above code:

                       

We will show a message here for the left button.

We will show a message here for the middle button.

We will show a message here for the right button.

Related Tutorials

jQuery Advanced Tutorials - Lesson 4 - Event Handler Attachments