.unbind()

Categories: Events > Event Handler Attachment

.unbind( [eventType ] [, handler(eventObject) ] ) Returns: jQuery

Description: Remove a previously-attached event handler from the elements.

version added: 1.0.unbind( [eventType ] [, handler(eventObject) ] )
- eventType
  
  Type: String
  
  A string containing a JavaScript event type, such as click or submit.
- handler(eventObject)
  
  Type: Function()
  
  The function that is to be no longer executed.
version added: 1.4.3.unbind( eventType, false )
- eventType
  
  Type: String
  
  A string containing a JavaScript event type, such as click or submit.
- false
  
  Type: Boolean
  
  Unbinds the corresponding 'return false' function that was bound using .bind( eventType, false ).
version added: 1.0.unbind( event )
- event
  
  Type: Object
  
  A JavaScript event object as passed to an event handler.

Event handlers attached with .bind() can be removed with .unbind(). (As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements.) In the simplest case, with no arguments, .unbind() removes all handlers attached to the elements:

1	`$('#foo').unbind();`

This version removes the handlers regardless of type. To be more precise, we can pass an event type:

1	`$('#foo').unbind('click');`

By specifying the click event type, only handlers for that event type will be unbound. This approach can still have negative ramifications if other scripts might be attaching behaviors to the same element, however. Robust and extensible applications typically demand the two-argument version for this reason:

                                
                                  
                                    var handler = function() {
                                  
                                
                                
                                  
                                      alert('The quick brown fox jumps over the lazy dog.');
                                  
                                
                                
                                  
                                    };
                                  
                                
                                
                                  
                                    $('#foo').bind('click', handler);
                                  
                                
                                
                                  
                                    $('#foo').unbind('click', handler);

By naming the handler, we can be assured that no other functions are accidentally removed. Note that the following will not work:

                                
                                  
                                    $('#foo').bind('click', function() {
                                  
                                
                                
                                  
                                      alert('The quick brown fox jumps over the lazy dog.');
                                  
                                
                                
                                  
                                    });
                                  
                                
                                
                                  
                                     
                                  
                                
                                
                                  
                                    
                                      // will NOT work
                                    
                                  
                                
                                
                                  
                                    $('#foo').unbind('click', function() {
                                  
                                
                                
                                  
                                      alert('The quick brown fox jumps over the lazy dog.');
                                  
                                
                                
                                  
                                    });

Even though the two functions are identical in content, they are created separately and so JavaScript is free to keep them as distinct function objects. To unbind a particular handler, we need a reference to that function and not a different one that happens to do the same thing.

Note: Using a proxied function to unbind an event on an element will unbind all proxied functions on that element, as the same proxy function is used for all proxied events. To allow unbinding a specific event, use unique class names on the event (e.g. click.proxy1, click.proxy2) when attaching them.

Using Namespaces

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions. As shown in the discussion for the .bind() method, namespaces are defined by using a period (.) character when binding a handler:

1	`$('#foo').bind('click.myEvents', handler);`

When a handler is bound in this fashion, we can still unbind it the normal way:

1	`$('#foo').unbind('click');`

However, if we want to avoid affecting other handlers, we can be more specific:

1	`$('#foo').unbind('click.myEvents');`

We can also unbind all of the handlers in a namespace, regardless of event type:

1	`$('#foo').unbind('.myEvents');`

It is particularly useful to attach namespaces to event bindings when we are developing plug-ins or otherwise writing code that may interact with other event-handling code in the future.

Using the Event Object

The third form of the .unbind() method is used when we wish to unbind a handler from within itself. For example, suppose we wish to trigger an event handler only three times:

                                
                                  
                                    var timesClicked = 0;
                                  
                                
                                
                                  
                                    $('#foo').bind('click', function(event) {
                                  
                                
                                
                                  
                                      alert('The quick brown fox jumps over the lazy dog.');
                                  
                                
                                
                                  
                                      timesClicked++;
                                  
                                
                                
                                  
                                      if (timesClicked >= 3) {
                                  
                                
                                
                                  
                                        $(this).unbind(event);
                                  
                                
                                
                                  
                                      }
                                  
                                
                                
                                  
                                    });

The handler in this case must take a parameter, so that we can capture the event object and use it to unbind the handler after the third click. The event object contains the context necessary for .unbind() to know which handler to remove. This example is also an illustration of a closure. Since the handler refers to the timesClicked variable, which is defined outside the function, incrementing the variable has an effect even between invocations of the handler.

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-latest.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 () {
                                    
                                  
                                  
                                    
                                      
                                        // could use .bind('click', aClick) instead but for variety...
                                      
                                    
                                  
                                  
                                    
                                      $("#theone").click(aClick)
                                    
                                  
                                  
                                    
                                        .text("Can Click!");
                                    
                                  
                                  
                                    
                                      });
                                    
                                  
                                  
                                    
                                      $("#unbind").click(function () {
                                    
                                  
                                  
                                    
                                      $("#theone").unbind('click', aClick)
                                    
                                  
                                  
                                    
                                        .text("Does nothing...");
                                    
                                  
                                  
                                    
                                      });
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        </script>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        </body>
                                      
                                    
                                  
                                  
                                    
                                      
                                        </html>

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

1	`$("p").unbind()`

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

1	`$("p").unbind( "click" )`

Example: To unbind just one previously bound handler, pass the function in as the second argument:

                                  
                                    
                                      var foo = function () {
                                    
                                  
                                  
                                    
                                      
                                        // code to handle some kind of event
                                      
                                    
                                  
                                  
                                    
                                      };
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      $("p").bind("click", foo); // ... now foo will be called when paragraphs are clicked ...
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      $("p").unbind("click", foo); // ... foo will no longer be called.

POWERED BYHERONOTE

previous page start next page

.unbind()

jQuery