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

青灯夜游
Release: 2022-03-25 19:40:15
Original
3370 people have browsed it

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();".

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

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!