jQuery Event unbind() Method

The jQuery event unbind() method is used to remove event handlers from selected elements. This method can also remove all or only selected event handlers or stop specified functions from running when the event occurs.

While removing multiple events from the elements, ensure that the event values are separated by a space.

This method is similar to the event off() method, both are used to remove event handlers.

The unbind() method was deprecated in jQuery version 3.0, you can use the off() method instead of this.

Syntax

Following is the syntax of the jQuery event unbind() method −

$(selector).unbind(eventType, function, eventObj);

Parameters

This method accepts three parameters named 'eventType', 'function', and 'eventObj', which are described below −

eventType (optional) − It specifies one or more events to remove from the elements.
function (optional) − It specifies the name of the function to unbind from the specified event for the element.
eventObj (optional) − It specifies the event object to remove.

Return Value

This method does not return any value, but removes the event handlers.

Example 1

The following is the basic example of the jQuery event unbind() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on me!</p>
    <div>Click on the below button to remove the event handler</div><br>
    <button>Remove event handler from p element.</button>
    <script>
        $('p').bind("click", function(){
            alert("Click event occured.")
        });
        $('button').click(function(){
            $('p').unbind("click");
            alert("Event handler removed from p element");
        });
    </script>
</body>
</html>

Output

After executing the above program, a "p" element and a button are displayed. When the user clicks on the button, the event handler is removed from the "p" element −

Example 2

Following is another example of the jQuery event unbind() method. We use this method to remove multiple event handlers from the selected elements −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            padding: 10px;
            background-color: green;
            color: white;
        }
        span{
            font-size: 20px;
            margin: 20px 0px;
        }
    </style>
</head>
<body>
    <p>Click, mouse over, and mouse out on the below box</p>
    <div>Tutorialspoint</div><br>
    <button>Remove mouseover and mouseout event</button>
    <br><br>
    <span></span>
    <script>
        $('div').bind("click mouseover mouseout", function(){
            $('span').text("Event bound with div element")
            $('span').css("color", "green");
        });
        $('button').click(function(){
            $('div').unbind("mouseover mouseout");
            $('span').text("Removed....! Only the click event remained bind");
            $('span').css("color", "red");
        });
    </script>
</body>
</html>

Output

The above program displayed a box and a button, when the user clicks, mouseover, and mouseout on the box, the respected event binds to the div element, and when user click on button only the selected event handler removed from the div element −

Example 3

If we omiited all the parameter, the unbind() method removes all the event handlers from the selected element −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 10px;
            color: white;
            background-color: green;
        }
    </style>
</head>
<body>
    <p>Click on the below button to remove all bind event handlers</p>
    <div>Tutorialspoint</div><br>
    <button>Remove all</button> <span></span>
    <script>
        $('div').bind("click mouseover mouseout", function(){
            alert("Three events bind with div element")
        });
        $('button').click(function(){
            $('div').unbind();
            $('span').text("All event handlers removed successfully....!");
        })
    </script>
</body>
</html>

Output

After executing the program, a div element and a button will be displayed. When the button is clicked all event handlers will be removed from div element −

jquery_ref_events.htm

Print Page