How to unbind the on-bound event in jQuery

jQuery is a very popular JavaScript library that is widely used in web development due to its rich API and powerful selectors. In jQuery, we can use the on() method to bind events, but what should we do when we need to unbind an event?

Unbinding a single event

In jQuery, we can use the off() method to unbind one or more events.

Suppose we have bound a click event through the on() method:

$('button').on('click', function(){
    alert('Hello World!');
});

To unbind this event, we can use the off() method on the element:

$('button').off('click');

This way you can unbind the click event.

Unbinding multiple events

If we have bound multiple events and want to unbind them all at once, we can pass in multiple event names in the off() method. Separate with spaces.

For example, suppose we have bound the click and mouseenter events through the on() method:

$('button').on('click mouseenter', function(){
    alert('Hello World!');
});

To unbind these two events, you can write like this:

$('button').off('click mouseenter');

Unbinding a specific event processing function

If we bind multiple processing functions for the same event and want to unbind one of the processing functions, we can pass it to the off() method Two parameters: event name and handler function to be dismissed.

For example, suppose we have bound the click event through the on() method and created two click event handlers:

function clickHandler1() {
    alert('Hello World1!');
}

function clickHandler2() {
    alert('Hello World2!');
}

$('button').on('click', clickHandler1);
$('button').on('click', clickHandler2);

If we want to unbind the first handler function If it is determined, you can do this:

$('button').off('click', clickHandler1);

This will only unbind the first processing function without affecting other processing functions.

Unbind all events

Finally, if we want to unbind all events at once, we can do it like this:

$('button').off();

But it should be noted that this method In addition to unbinding the event, all related data and event handling functions will also be unbound at the same time, so you need to use it with caution.

Summary

Whether it is to unbind a single event or unbind multiple events, jQuery's off() method can do the job perfectly. If you want to cancel a specific event handler, you need to specify the handler you want to cancel in the off() method.

During the development process, we need to use these methods flexibly to achieve better code effects.

The above is the detailed content of How to unbind the on-bound event in jQuery. For more information, please follow other related articles on the PHP Chinese website!