jquery中使用live绑定事件与die解除绑定事件

乐之者java

于 2020-06-25 11:35:25 发布

阅读量457

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106956394

版权

前端专栏收录该内容

175 篇文章 3 订阅

订阅专栏

到现在为止，对于页面动态创建的元素绑定事件，我已经讲过了一组函数，即delegate与undelegate,下面我要说的是live和die，这两个函数在我使用的jquery-1.12.4这个版本中已经取消掉了，具体的应该是jquery在1.8之后的版本中就取消掉了这两个函数，因为它的功能完全可以由delegate与undelegate来实现，其实，在jquery1.8之后，也并不推荐再使用delegate与undelegate了，而是统一使用on与off函数来实现事件的绑定与解除，这样归于一统，使用起来更方便，我们也不再需要记忆那么多函数了，关于delegate与undelegate,live和die，以及on与off实现动态创建元素的事件绑定到底是啥，我会在后边有个综合案例来演示一下，现在我们来看看live与die。

live绑定事件格式：live(events, [data], fn)，如live实现动态创建元素的事件绑定：

$(“.button”).live(“click”,function(){
      $(this).clone().appendTo(“#box”);
})

表示新增加的按钮点击后也可以生成新的按钮，基于事件委托的方式实现了事件的动态绑定，这也是live的主要用途。

die解除事件绑定：die([type], [fn])

例子，先贴出html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>live与die</title>
</head>
<body>
	<ul>
		<li>
			<div>
				<span>苹果</span>
				<span>香蕉</span>
				<span>梨子</span>
			</div>	
		</li>
		<li>
			<div>
				<span>中国</span>
				<span>巴基斯坦</span>
				<span>俄罗斯</span>
			</div>	
		</li>
	</ul>

	<input type="button" id="btn" value="解除live">
</body>
</html>

live与die的jquery代码，注意我这里引入的是jquery-1.7.1.js，引入jquery-1.12.4.min.js是不行的，因为jquery-1.12.4.min.js中已经取消了live与die方法：

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">

$(function(){
		$("span").live("click",function(){
			var txt=$(this).text();//this指的是最终被绑定事件的元素
			alert(txt);
		});
		$("#btn").click(function(){
			$("span").die();
		});
});
</script>