jquery
  1. jquery-unbind
PreviousNext

jQuery unbind()

The unbind() method in jQuery is used to remove an existing event handler from one or more selected elements. It is the opposite of the bind() method, which is used to attach new event handlers to elements.

Syntax

The basic syntax of the unbind() method is as follows:

$(selector).unbind(event, handler);

Where:

  • selector: the element(s) you want to remove the event handler from.
  • event: the type of event to unbind (e.g., "click", "mouseenter", "submit", etc.).
  • handler: the function that was bound to the event handler, which will be removed.

Use

The unbind() method is useful when you want to remove an event handler from an element, either because you no longer need it or because you want to replace it with a different one. It can be used with any type of event that has been bound to an element using the bind() or on() methods.

Example

Here's an example that demonstrates how to use the unbind() method to remove a click event handler from a button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Bind and Unbind Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <button id="myButton">Click me</button>

    <script>
        // Use $(document).ready() to ensure the DOM is fully loaded before executing the script
        $(document).ready(function() {
            // Bind a click event handler to the button
            $('#myButton').bind('click', function() {
                // Display an alert when the button is clicked
                alert('Button clicked!');
            });

            // Use the unbind() method to remove the click event handler from the button
            $('#myButton').unbind('click');
        });
    </script>
</body>
</html>
Try Playground

In this example, we first bind a click event handler to the button using the bind() method. When the button is clicked, an alert dialog is displayed with the message "Button clicked."

Next, we use the unbind() method to remove the click event handler from the button. Now, when the button is clicked, nothing happens.

Summary

The unbind() method in jQuery is a simple and effective way to remove an event handler from one or more selected elements. It can be used in conjunction with the bind() or on() methods to manage event handlers on your web page. With its easy-to-use syntax and powerful functionality, the unbind() method is an essential tool in any jQuery developer's toolkit.

bind()blur()
Published on: