How to unbind events in jquery?

Methods to unbind events: 1. Use the unbind() and undelegate() methods, which are used to unbind events bound by the bind() and delegate() methods respectively; 2. Use off() Method, you can unblock events bound by on(), bind() and delegate() methods.

The operating environment of this tutorial: Windows 7 system, jQuery version 1.7. This method is suitable for all brands of computers.

Related recommendations: "jQuery Video Tutorial"

Unbind the event

In the element After binding an event, when the event processing is no longer needed at a certain moment, the bound event can be unbound. jQuery provides the unbind() and undelegate() methods, which are used to unbind events bound by the bind() and delegate() methods respectively. Just specify the bound events that need to be untied through the parameters. When the method does not provide parameters, it means to unbind all events of the element.

The off() method is provided in jQuery1.7, which is used to release events bound by the on(), bind() and delegate() methods. The off() method is exactly the same as on.

Example: Unbinding event

nbsp;html>
  
	<meta>
	<title>jQuery基本操作事件绑定</title>
	<script> </script>
   	<style>
		p{width:200px;height:200px;border:1px solid #666;}
		#leftp{float:left; margin:0 auto;}
		#rightp{float:right;}
	</style>
  
  
  	<p>
    	<input>
        <input>
        <input>
        <input>
    </p>
    <p>右侧展示区</p>
	<script>
		$(function(){
			//使用bind()方法绑定事件
			$("#manyBindBtn").bind({
				click:function(){$("#rightp").slideToggle();},
				mouseover:function(){$("#rightp").css("background-color","red");},
				mouseout:function(){$("#rightp").css("background-color","yellow");}
			});
			//使用delegate()方法绑定事件
			$(document).delegate("#delegateBindBtn","click",function(){
				$("#rightp").slideToggle();
			});
			//使用hover()方法绑定事件
			$("#rightp").hover(function(){
				$(this).css("background-color","gray");
			},function(){
				$(this).css("background-color","white");
			});
			//使用on()方法绑定事件
			$("#leftp").on("click","#bindBtn", function(){
				alert("使用bind()方法绑定事件处理");
			});
			//解除事件绑定
			$("#removeBindBtn").on("click",function(){
				//1.使用unbind()解除click事件绑定
				//$("#manyBindBtn").unbind("click");
				//2.使用unbind()解除该元素上的所有事件绑定
				//$("#manyBindBtn").unbind();
				//3.使用off()方法解除bind()方法的click事件绑定
				$("#manyBindBtn").off("click");
				//$(document).off("click","#manyBindBtn");
				//4.使用off()方法解除该元素上的所有事件绑
				//$("#manyBindBtn").off();				
				//5.使用undelegate()方法解除delegate()方法绑定事件
				//$(document).undelegate("#delegateBindBtn","click");
				//6.使用off()方法解除delegate()方法绑定事件
				$(document).off("click","#delegateBindBtn");
				//7.使用off()方法解除on()方法的click事件绑定
				$("#leftp").off("click","#bindBtn");
				//8.使用off()方法解除所有按钮上的所有事件绑定
				$("input[type=button]").off();
			});
		});
	</script>
  

For more programming-related knowledge, please visit: Programming Course! !

The above is the detailed content of How to unbind events in jquery?. For more information, please follow other related articles on the PHP Chinese website!