jQuery Event off() Method

The jQuery event off() method is used to remove event handlers that were attached to an element using the on() method. This method can also be used to remove one or more event handlers from the selected elements, specified by the event type, selector, and a function.

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

Syntax

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

$(selector).off(event, selector, function(eventObj), map);

Parameters

This method accepts four parameters named 'event', 'selector', 'handler', and 'map', which are described below −

event − It specifies one or more events to remove from the elements.
selector (optional) − It is a selector string to filter the descendants (or child) of the selected elements that will call the handler.
function − A specific handler function to remove.
map − A map contains a key-value pair, where the key specifies the events and values specify the respective handler function.

Return Value

This method does not have any return value.

Example 1

The following program demonstrates the usage of the jQuery event off() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        p{
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>Tutorialspoint (click to change color)</p>
    <button>Remove event handler</button>
    <script>
        $('p').on("click", function(){
            $(this).css("color", "green");
        })
        $('button').click(function(){
            $('p').off("click");
            alert("Eevnt removed...!");
        })
    </script>
</body>
</html>

Output

After executing the program, a p element and a button are displayed. When a user clicks on the p element its color change to green, and when the button is clicked the event handler will be removed from the "p" element −

Example 2

Following is another example of the jQuery event off() method. We use this method to remove a specific event handler function for click events on <div> elements −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            background-color: green;
            padding: 10px;
            width: 300px;
        }
        button{
            margin: 10px 0px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <p>Mouse over the below element</p>
    <div>Tutorialspoint</div>
    <button>Remove</button>
    <span></span>
    <script>
        $('div').on("mouseover", custHandler);
        function custHandler(){
            alert("Handler for mouseover called.")
        }
        $('button').click(function(){
            $('div').off("mouseover", custHandler);
            $('span').text("Removed...!");
        })
    </script>
</body>
</html>

Output

Once the above program is executed, a box (represented by a div element) and a button are displayed. When the mouse pointer hovers over the div, a pop-up alert appears on the browser screen. When the button is clicked it removes the specific event handler from the div −

Example 3

In the below example, we use the jQuery off() method to remove all the event handlers from the specified element −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            padding: 10px;
            width: 200px;
            transition: 1s;
        }
        button{
            margin: 10px 0px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <p>Click, double click, mouse enter, and mouse out from the below element</p>
    <div>Tutorialspoint</div>
    <button>Remove</button><span></span>
    <span></span>
    <script>
       $('div').on("click dblclick mousenter mouseleave", function(){
        $(this).css({"background-color": "green", "color": "white", "border-radius": "10px", "width": "300px"});
       });
       $('button').click(function(){
        $('div').off();
       });
    </script>
</body>
</html>

Output

After executing the above program, a div element and a button are displayed. When the button is clicked, it removes all event handlers from the div element −

jquery_ref_events.htm

Print Page