Home  >  Article  >  Web Front-end  >  Detailed explanation of jQuery unbind() method example_jquery

Detailed explanation of jQuery unbind() method example_jquery

WBOY
WBOYOriginal
2016-05-16 15:19:111192browse

The example in this article describes how to use the jQuery unbind() method. Share it with everyone for your reference, the details are as follows:

The unbind() method in jQuery is the reverse operation of the bind() method and removes the bound event from each matching element.

Grammar structure:

Copy code The code is as follows:
unbind([type][, data]);

type is the event type, data is the event to be removed. The specific instructions are as follows:
1. If there are no parameters, delete all binding events;
2. If the event type (type) is provided as a parameter, only the bound events of this type will be deleted;
3. If the handler function passed during binding is used as the second parameter, only this specific event handler function will be deleted.

Please see the example below:

<script src="jquery.js" type="text/javascript"></script>
<style>
.info {
  background:#ffff66;
}
</style>
<input type="button" id="btn" value="点击我" />
<input type="button" id="delAll" value="删除全部绑定函数" />
<input type="button" id="delFun2" value="删除第二个绑定函数" /><br />
<div class="info"></div>
<script type="text/javascript">
$(document).ready(function(){
  // 为id为btn的按钮添加绑定事件
  $("#btn").bind('click', fun1=function(){
    $(".info").append('<p>绑定函数1</p>');
  }).bind('click', fun2=function(){
    $(".info").append('<p>绑定函数2</p>');
  }).bind('click', fun3=function(){
    $(".info").append('<p>绑定函数3</p>');
  })
  $("#delAll").bind('click', function(){
    $("#btn").unbind(); //删除全部绑定事件
  })
  $("#delFun2").bind('click', function(){
    $("#btn").unbind('click', fun2); //删除第二个绑定函数
  })
})
</script>

Effect display:

Readers who are interested in more content related to jQuery events can check out this site's special topic: "Summary of jQuery common event usage and techniques"

I hope this article will be helpful to everyone in jQuery programming.

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