Home >Web Front-end >JS Tutorial >How to use jQuery unbind method

How to use jQuery unbind method

清浅Original: 2019-03-20 10:09:202697browse

The unbind() method in jQuery is used to remove the event handler of the selected element and terminate the function when the event occurs. It can only unbind the bind method or the event handler registered with the jQuery method

The unbind() method in jQuery is the reverse operation of the bind() method, which means to delete the bound event from each matching element. Next, I will explain the use of the unbind method specifically in the article, which has certain reference value. I hope it will be helpful to everyone

[Recommended courses:jQuery Tutorial】

unbind() method introduction

The unbind() method is used to remove all or selected elements The event handler and the execution of the termination function when the event occurs

Note: The unbind method can only unbind the bind method or the event handler registered with the jQuery method. For example, in the following example, you can unbind it through the unbind() method.

$(&#39;demo&#39;).click(function(){})

However, events registered with the native addEventListener and attachEvent under IE and events bound using the onclick/onmouseover attributes cannot be unbind through unbind. Example:

var demo = document.getElementById(&#39;demo&#39;);
demo.addEventListener(demo,function(){},false);
demo.onclick = function(){}

unbind() method syntax structure:

$(selector).unbind(event,function)

event refers to one or more events that delete elements and is an optional value. If only this parameter is specified, all functions bound to the specified event will be deleted

function refers to the name of the function that unbinds from the specified event of the element, and is also an optional parameter

Case: The background color changes when the div is clicked, but the background color does not change when the delete event is clicked

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title></title> 
<style type="text/css"> 
div{ 
  width:200px; 
  height:200px; 
  background-color:yellow; 
  text-align:center; 
  line-height:200px; 
} 
.bg{
  background-color: pink;
}
</style> 
<script type="text/javascript" src="./jquery/jquery-1.12.4.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("div").click(function(){ 
    $("div").addClass(&#39;bg&#39;)
  }); 
  $("button").click(function(){ 
    $("div").unbind(); 
  }) 
}) 
</script> 
</head> 
<body> 
<div></div> 
<button>删除事件</button> 
</body> 
</html>

Rendering:

How to use jQuery unbind method

Summary: The above is the entire content of this article. I hope it will be helpful for everyone to learn the unbind method in jQuery.

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the method of using Proxy to implement two-way binding (code)Next article：Introduction to the method of using Proxy to implement two-way binding (code)

See more

How to use jQuery unbind method

Related articles