# .undelegate()

Categories: Events > Event Handler Attachment

## .undelegate( ) Returns: jQuery

Description: Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

- #### version added: 1.4.2.undelegate()

- #### version added: 1.4.2.undelegate( selector, eventType )

  selectorA selector which will be used to filter the event results.

  eventTypeA string containing a JavaScript event type, such as "click" or "keydown"

- #### version added: 1.4.2.undelegate( selector, eventType, handler )

  selectorA selector which will be used to filter the event results.

  eventTypeA string containing a JavaScript event type, such as "click" or "keydown"

  handlerA function to execute at the time the event is triggered.

- #### version added: 1.4.3.undelegate( selector, events )

  selectorA selector which will be used to filter the event results.

  eventsA map of one or more event types and previously bound functions to unbind from them.

- #### version added: 1.6.undelegate( namespace )

  namespaceA string containing a namespace to unbind all events from.

The `.undelegate()` method is a way of removing event handlers that have been bound using `.delegate()`. As of jQuery 1.7, the `.on()` and `.off()` methods are preferred for attaching and removing event handlers.

### Examples:

#### Example: Can bind and unbind events to the colored button.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    button { margin:5px; }
    button#theone { color:red; background:yellow; }
    </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <button id="theone">Does nothing...</button>
    <button id="bind">Bind Click</button>
    <button id="unbind">Unbind Click</button>
    <div style="display:none;">Click!</div>
    <script>
    function aClick() {
      $("div").show().fadeOut("slow");
    }
    $("#bind").click(function () {
      $("body").delegate("#theone", "click", aClick)
        .find("#theone").text("Can Click!");
    });
    $("#unbind").click(function () {
      $("body").undelegate("#theone", "click", aClick)
        .find("#theone").text("Does nothing...");
    });
    </script>

    </body>
    </html>

#### Demo:

#### Example: To unbind all delegated events from all paragraphs, write:

    $("p").undelegate()

#### Example: To unbind all delegated click events from all paragraphs, write:

    $("p").undelegate( "click" )

#### Example: To undelegate just one previously bound handler, pass the function in as the third argument:

    var foo = function () {
      // code to handle some kind of event
    };

    // ... now foo will be called when paragraphs are clicked ...
    $("body").delegate("p", "click", foo);

    // ... foo will no longer be called.
    $("body").undelegate("p", "click", foo);

#### Example: To unbind all delegated events by their namespace:

    var foo = function () {
      // code to handle some kind of event
    };

    // delegate events under the ".whatever" namespace
    $("form").delegate(":button", "click.whatever", foo);

    $("form").delegate("input[type='text']", "keypress.whatever", foo);

    // unbind all events delegated under the ".whatever" namespace

    $("form").undelegate(".whatever");