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

Undelegate event handler.

Description

The .undelegate() method is used to remove all event handlers for all elements matching the specified selector for the given event type(s), based upon a specific set of root elements.

  • The .undelegate() method unattaches event handlers previously attached using the .delegate() method.
  • Starting with jQuery version 1.7 more flexible event delegation can be achieved by 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
.undelegate()Unattach all event handlers.
.undelegate( selector, eventType )Unattach all elements matching the specified selector for the given event type.
.undelegate( selector, eventType, handler( eventObject) )Unattach an event handler for all elements matching the specified selector for the given event type.
.undelegate( selector, events )An object of event type(s) and previously bound functions to unattach from.
.undelegate( namespace )Unattach all events for a namespace.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to filter the elements that trigger the events.String
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 bound to a custom event. Custom events are never called by the browser, but can be triggered manually from other JavaScript code using the .trigger()) or .triggerHandler() methods.
  • 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 .delegate( 'anEventType.aNamespace', handler) could be used to handle some events whilst not affecting events for .delegate( 'anEventType.aNamespace2', handler). In essence, namespacing allows us to action certain events for an eventType without affecting other events for that eventType.
String
handler( eventObject )A function to unbind from.Function
eventsAn object of event type(s) and previously bound functions to unbind from.Object
namespaceA string prefixed with the period (.) character to unbind from.String

Return

A jQuery object.

.undelegate() Example  Events  <<  Top

Unattach all event handlers.

In the example below we have delegated an event handler for 'btn17' for the mouseenter JavaScript event from the root element 'p'. This handler will change the background colour of this button and output a message. When we click on the button we undelegate this handler.


$(function(){
  $('p').delegate('#btn17', 'mouseenter', function() {
    $(this).css('backgroundColor', 'yellow');
    $('#scrollspan12').append('**entering "btn17"');
  });
  $('#btn17').click(function(){
    $(this).css('backgroundColor', 'orange');
    $('p').undelegate();
    $('#scrollspan12').append('**mouseenter event undelegated for "btn17"');
  });
});

Press the button below to action the above code:

We will show a message here.

.undelegate( selector, eventType ) Example  Events  <<  Top

Unattach all elements matching the specified selector for the given event type.

In the example below we have delegated event handlers for 'btn18' for the mouseenter and mouseleave JavaScript events. These handlers will change the background colour of this button and output a message. When we click on the button below we undelegate the 'mouseleave' event handler. Mouseover and leave the button after clicking it to see the effect of the undelegate.


$(function(){
  $('.content').delegate('#btn18', 'mouseenter', function() {
    $(this).css('backgroundColor', 'lime');
    $('#scrollspan13').append('**entering "btn18"');
  });
  $('.content').delegate('#btn18', 'mouseleave', function() {
    $(this).css('backgroundColor', 'aqua');
    $('#scrollspan13').append('**leaving "btn18"');
  });
  $('#btn18').click(function(){
    $(this).css('backgroundColor', 'fuchsia');
    $('.content').undelegate('#btn18', 'mouseleave');
    $('#scrollspan13').append('**mouseleave event undelegated for "btn18"');
  });
});

Press the button below to action the above code:

We will show a message here.

.undelegate( selector, eventType,
                        handler(eventObject) ) Example  Events  <<  Top

Unattach an event handler for all elements matching the specified selector for the given event type.

In the example below we have delegated event handlers for 'btn19' for the mouseenter and mouseleave JavaScript events. These handlers will change the background colour of this button and output a message. When we click on the button below we undelegate the 'mouseenter' event handler. Mouseover and leave the button after clicking it to see the effect of the undelegate.


$(function(){
  var ourHandler2 = function() {
    $(this).css('backgroundColor', 'teal');
    $('#scrollspan14').append('**entering "btn19');
  };
  var ourHandler3 = function() {
    $(this).css('backgroundColor', 'teal');
    $('#scrollspan14').append('**leaving "btn19');
  };
  $('form').delegate('#btn19', 'mouseenter', ourHandler2);
  $('form').delegate('#btn19', 'mouseleave', ourHandler3);
  $('#btn19').click(function(){
    $(this).css('backgroundColor', 'green');
    $('form').undelegate('#btn19', 'mouseenter', ourHandler2);
    $('#scrollspan14').append('**mouseenter event undelegated for "btn19"');
  });
});

Press the button below to action the above code:

We will show a message here.

.undelegate( selector, events ) Example  Events  <<  Top

An object of event type(s) and previously bound functions to unattach from.

In this example we attach a map of event types to the table elements below and actions to perform when they are fired. When we press the button with an id of 'btn20' the click JavaScript event fires and we append some text to a paragraph and use a map to turn off the events and functions tied to the table elements. Mouseover and leave the table elements after clicking the button to see the effect of the undelegate.

Table For Testing The .siblings() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


$(function(){
  var ourHandler4 = function() {
    $(this).css('backgroundColor', 'orange');
    $('#scrollspan15').append('**entering ".testtable td"');
  };
  var ourHandler5 = function() {
    $(this).css('backgroundColor', 'olive');
    $('#scrollspan15').append('**leaving ".testtable td"');
  };
  $('#table1').delegate('td', 'mouseenter', ourHandler4);
  $('#table1').delegate('td', 'mouseleave', ourHandler5);
  $('#btn20').click(function(){
    $('#table1').undelegate('td', {mouseenter: ourHandler4, mouseleave: ourHandler5});
    $('#scrollspan15').append('**mouseenter/mouseleave events undelegated for ".testtable td"');
  });
});

Press the button below to action the above code:

We will show a message here.

.undelegate( namespace ) Examples Events  <<  Top

Unattach 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 attached to 'btn21' 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 attached to 'btn22' 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 unattach 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(){
  $('body').delegate('#btn21', {
    'mouseenter.ns1': function() {
      $(this).css('backgroundColor', 'yellow');
      $('#scrollspan16').append('**entering "btn21"');
    },
    'mouseleave.ns2': function() {
      $(this).css('backgroundColor', 'orange');
      $('#scrollspan16').append('**leaving "btn21"  ');
    }
  });
  $('body').delegate('#btn22', {
     'mouseenter.ns2': function() {
       $(this).css('backgroundColor', 'fuchsia');
       $('#scrollspan17').append('**entering "btn22"');
     },
     'mouseleave.ns1': function() {
       $(this).css('backgroundColor', 'lime');
       $('#scrollspan17').append('**leaving "btn22"  ');
     }
  });
  $('#btn23').click(function(){
    $(this).css('backgroundColor', 'aqua');
    $('#btn21, #btn22').undelegate('.ns2');
    $('#scrollspan18').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