对于事件没有反应，Jquery中的live()函数

最新推荐文章于 2024-07-03 02:50:17 发布

小勇Oo

最新推荐文章于 2024-07-03 02:50:17 发布

阅读量747

点赞数

分类专栏： js篇

本文链接：https://blog.csdn.net/qq383264679/article/details/43229437

版权

js篇专栏收录该内容

29 篇文章 0 订阅

订阅专栏

首先看一下W3c官方Api如何说的：

jQuery 事件 - live() 方法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

语法：

$(selector).live(event,data,function)

参数	描述
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到该函数的额外数据。
function	必需。规定当事件发生时运行的函数。

参数

描述

event

必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

data

可选。规定传递到该函数的额外数据。

function

必需。规定当事件发生时运行的函数。

测试页面如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	
	
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
	
	
<script type="text/javascript">
		$(function() {	
			 $("input[name=bind]").click(function() {	
					$("#one").click(function() {
						
					});
			 });
			 
			 $("input[name=remove]").click(function() {
			 		var aNode = '<a href="javascript:void(0);" class="hid">alaaai</a>';
					
					$("#one").append(aNode);
			 });
			 
			 
			 //超链接点击事件
			 $(".hid").live("click", function(event) {
			// $(".hid").click(function(event) {
			 		var e = event;
			 		//获取当前点击对象
			 		var targ;
					if (!e) var e = window.event
					if (e.target) targ = e.target
					else if (e.srcElement) targ = e.srcElement
			 		
					console.log(targ);
					alert("该点击对象是 : " + targ);
			 });
			 
		});
</script>

<style>
	#one{
		border:1px solid red;
		width:400px;
		height:300px;
	}

</style>	
</head>

<body>
	<div id="test">
		<div id="one" style="visibility:black">
				
		
		
				<a href="javascript:void(0);" class="hid">alaaai</a>  <br  />
				<a href="javascript:void(0);" class="hid">jingdongaa</a> <br  />
		</div>  <br />

		
		<input type="button" value="给DIV one注册点击事件"  name="bind" />
		
		
		<input type="button" value="动态添加一个超链接A" name="remove" />
	</div>
</body>
</html>

注意：当jquery版本大于1.7时候，live事件是会失效，应该采用on来代替。

如果不用live方式，下面的方式也是可以实现的。

var aNode = '<a href="javascript:void(0);" class="hid">alaaaigtgt</a>';

					$("#one").append(aNode);
					//防止class为.hid的超链接a注册点击事件,移除绑定的事件
					 $('.hid').unbind("click"); 
					
					
					 $(".hid").click(function(event) {
						var e = event;
						//获取当前点击对象
						var targ;
						if (!e) var e = window.event
						if (e.target) targ = e.target
						else if (e.srcElement) targ = e.srcElement
						
						console.log(targ);
						alert("该点击对象是 : " + targ);
					});
					
					console.log(aNode);

注意：防止事件多次注册，需要解除绑定事件！