How to delete events with off() method in jQuery

The method of off deleting events in jQuery: first create a code file; then enter the HTML element; finally delete the event registered in a specific HTML element through the [object element.off(event name, selector)] syntax That’s it.

The operating environment of this article: Windows 7 system, Dell G3 computer, jquery version 3.2.1.

off() is a method that can delete events registered in specific HTML elements. In this article, we will introduce the specific use of the off() method in jQuery to delete events.

Let's look at an example first

$('button').click(function() {
    console.log('按钮被点击！');
})
$('a').on('click', function() {
    console.log('链接被点击！');
})

In this example, the status of click event processing is described in the "Button Element" and "Link Element" respectively.

When clicked, the string specified by the console will be output.

In this case, because there is no need for click event processing, off() is very useful if you want to delete it dynamically.

Next let's look at the usage of off()

off() is basically executed against the element whose event is registered.

The basic syntax is as follows

对象元素.off( 事件名称, 选择器 )

You can see that off() is executed on the target element.

The parameters can be omitted, but specific events can be deleted by specifying the event name.

In addition, you can also limit the scope of deleted objects by setting a selector.

Method to delete a specific event (click)

Suppose there is the following HTML.

<a href="#">链接</a>
<button>删除</button>

This is just the status of the simple "link element" and "button element" being configured respectively.

In this state, when clicking the "Link Element" outputs a string to the console, as described below.

$('a').on('click', function() {
  console.log('链接已被点击！');
})

You can see that the click event is registered using the on method.

Now let's try to remove the "Link Element" event by clicking on the "Button Element"!

$('button').on('click', function() {
  $('a').off();
})

In this example, you can see that off() is performed on the link element in the click event handling.

Therefore, the event of the link element is deleted the moment the button element is clicked.

It can be confirmed that no information is output to the console even if the link element is clicked.

This article ends here. For more exciting content, you can pay attention to other related column tutorials on the PHP Chinese website! ! !

The above is the detailed content of How to delete events with off() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!