Categories

.undelegate()

Categories: 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.

  • .undelegate()

    version added: 1.0
  • .undelegate( selector, eventType )

    version added: 1.0

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

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

  • .undelegate( selector, eventType, handler )

    version added: 1.0

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

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

    handler   A function to execute at the time the event is triggered.

  • .undelegate( selector, events )

    version added: 1.0

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

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

  • .undelegate( namespace )

    version added: 1.0

    namespace   A 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.

  • Can bind and unbind events to the colored button.

    HTML:
    <button id="theone">Does nothing...</button>
    <button id="bind">Bind Click</button>
    <button id="unbind">Unbind Click</button>
    <div style="display:none;">Click!</div>
    CSS:
    
    button { margin:5px; }
    button#theone { color:red; background:yellow; }
    
    Code:
    
    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...");
    });
    
  • To unbind all delegated events from all paragraphs, write:

    Code:
    $("p").undelegate()
  • To unbind all delegated click events from all paragraphs, write:

    Code:
    $("p").undelegate( "click" )
  • To undelegate just one previously bound handler, pass the function in as the third argument:

    Code:
    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); 
  • To unbind all delegated events by their namespace:

    Code:
    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");