Javatpoint Logo
Javatpoint Logo

jQuery unbind() method

The unbind() method in jQuery is used to remove the event handlers from the selected elements. We can also use this method to remove all or specific event handlers. It can also be used to stop specified functions.

Syntax

Parameter values

This method accepts three optional parameter values that are defined as follows.

event: It is an optional parameter. It specifies one or more events to remove from the elements. If we want to remove multiple events, they must be separated by space.

function: It is also an optional parameter. This parameter specifies the function's name to unbind from the specified element or event.

eventObj: It is also an optional parameter. It comes from the event binding function.

When we use the unbind() method without using any arguments, the method will remove all event handlers attached to the element.

Let's understand the unbind() method by using some illustrations.

Example1

In this example, there are two h3 heading elements and a button. On hovering the elements with text Hover me, the mouseover event will be attached to them.

Here, we are using the unbind() function to unbind the mouseover event. We can check the working of the unbind() method by first hovering an h3 element and then clicking the given button. On hovering, the style of h3 heading will get changed, and when we click the given button, the hovering will not affect another h3 element.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery unbind() method

On moving the cursor on the first h3 element, the output will be -

jQuery unbind() method

After clicking the given button, when we hover the second h3 element, nothing will happen because the event is removed.

Example2

In this example, we are using the unbind() method to remove an event handler once the event has been triggered a certain number of times. Here, there is a div element whose width, height, and font-size can be increased only thrice. It is because the unbind() function will remove its click event once it is triggered thrice. On every click, the height and width of div will increase by 25px, and its font-size will increase by 10px.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery unbind() method

On clicking the text Click me, the style of the div gets changed on each click. After clicking the text three times, the output will be -

jQuery unbind() method




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA