How to remove an event in jquery-Front-end Q&A-php.cn

How to remove an event in jquery

青灯夜游

Release： 2022-06-10 15:42:20

Original

4669 people have browsed it

Jquery method to remove events: 1. Use unbind(), the syntax "the element to which the event is bound. unbind("specified event name")" can remove the specified event of the selected element; 2. Use off() can remove the specified event added by on() in the element, the syntax is "the element to which the event is bound.off("event name")".

How to remove an event in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery method to remove an event

Method 1: Use the unbind() method

## The #unbind() method removes the event handler of the selected element.

This method can remove all or selected event handlers, or terminate the execution of the specified function when an event occurs.

ubind() works with any event handler attached via jQuery.

Syntax:

$(selector).unbind(event,function,eventObj)

Copy after login

ParametersDescriptionOptional. Specifies one or more events to be removed from the element. Optional. Specifies the name of the function to unbind the specified event from the element. Optional. Specifies the removed event object to use. this


event	Multiple event values separated by spaces. If only this parameter is specified, all functions bound to the specified event are removed.
function
eventObj	eventObj parameters come from the event binding function.

Example: Remove click event from element

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			function alertMe1() {
				alert("Hello World!");
			}
			function alertMe2() {
				$("p").css("color","red")
			}
			$(document).ready(function() {
				$("p").click(alertMe1).click(alertMe2);
				$("button").click(function() {
					$("p").unbind("click");
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<p>点击任意一个p元素来触发 alert 弹窗且字体颜色变红。</p>
		<button>移除 p 元素的 click 事件</button>

	</body>

Copy after login

How to remove an event in jquery

Instructions: As of jQuery version 1.7, the on() and off() methods are the preferred way to add and remove event handlers on elements.

Method 2: Use the off() method

The off() method is usually used to remove event handlers added through the on() method.

Note: To remove a specified event handler, the selector string must match the parameter passed in the on() method when the event handler is added.

Syntax:

$(selector).off(event,selector,function(eventObj),map)

Copy after login

ParametersDescriptionRequired. Specifies one or more events or namespaces to be removed from the selected elements. Optional. Specifies the selector initially passed to the on() method when adding an event handler. Optional. Specifies a function to run when an event occurs. Specifies event mapping (


event	Multiple event values separated by spaces. Must be a valid event.
selector
function(eventObj)
map	{event:function, event:function, ...}), Contains one or more events to be added to the element, and a function to run when the event occurs.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			function changeSize() {
				$(this).animate({
					fontSize: "+=10px"
				});
			}

			function changeSpacing() {
				$(this).animate({
					letterSpacing: "+=5px"
				});
			}

			$(document).ready(function() {
				$("p").on("click", changeSize);
				$("p").on("click", changeSpacing);
				$("button").click(function() {
					$("p").off("click");
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落 。</p>
		<p>这是另外一个段落。</p>
		<p>点击任意一个段落来修改段落的字体大小。</p>

		<button>移除click事件</button>

	</body>
</html>

Copy after login

How to remove an event in jquery

[Recommended learning:

jQuery video tutorial, web front-end video】

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