Home > Article > Web Front-end > How to cancel the event bound by on() in jquery

How to cancel the event bound by on() in jquery

青灯夜游Original: 2022-03-25 19:40:153419browse

Cancellation method: 1. Use the off() function, which can remove the event handler added through on(). The syntax is "event-bound element.off()"; 2. Use unbind () function, this function can delete the event handler added by any jq method, the syntax is "event-bound element.unbind();".

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

jquery cancels on() bound events

Method 1: Use off() function

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").on("click", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("p").off();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<p>点击任何段落可以令其消失。包括本段落。</p>

		<button>移除on()添加的事件</button>

	</body>
</html>

How to cancel the event bound by on() in jquery

2. Use the unbind() function

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").on("click", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("p").unbind();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<p>点击任何段落可以令其消失。包括本段落。</p>

		<button>移除 on()添加的事件</button>

	</body>
</html>

How to cancel the event bound by on() in jquery

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of How to cancel the event bound by on() in jquery. For more information, please follow other related articles on the PHP Chinese website!

jquery 事件

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：How to select the third p element using jquery methodNext article：How to select the third p element using jquery method

See more

How to cancel the event bound by on() in jquery

Related articles