jquery事件操作之给未来元素绑定事件

时间：6年前阅读：7140

on()方法在被选元素及子元素上添加一个或多个事件处理程序。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#box{    
				width: 600px;    
				height: 500px;    
				border: 2px solid blue;    
			}    
		</style>    
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
		$(function(){    
				$('#dd').click(function(){    
//					创建一个新的h2追加到box中    
					$("#box").append('<h2>这个是新来的标签内容</h2>');					
    
				})    
//				给每个h2添加单击事件    但是会发现新增进来的元素没有事件，因为页面加载完执行的时候，还没有新增进来的元素  ！！！这种新增进来的元素叫未来元素    
//				$('#box h2').click(function(){    
//					alert('单击h2的内容');    
//				
    
//				})    
//	未来元素要用到on来给它加事件     个人理解为：把#box里面的click单击事件  委托给click单击里面的h2    
//				给未来元素加事件    
					$('#box').on('click','h2',function(){    
					alert('看一下是不是所有的h2都能点了？');    
				})    
			})	
    
			</script>    
	</head>    
	<body>    
		<h1 id="aa">这个是h1标签</h1>    
		<input type="button" name="" id="dd" value="来点我呀" />    
		<br /><br />    
		<div id="box">    
		<h2>德帅坦言面临幸福烦恼 豪斯：回来后自信心更足0</h2>    
		<h2>直击-小里弗斯被轮休赛后加练 德帅遭遇美丽的烦恼1</h2>    
		<h2>哈登为何还不轮休？火箭别无选择 为避勇士得保三争二2</h2>    
		<h2>伤情无大碍！妻子嗮那不勒斯门神与家人自拍3</h2>    
		<h2>西媒：C罗基本退出欧洲金靴奖争夺4</h2>    
		<h2>观点-巴萨又想签格列兹曼？这次不大可能5</h2>    
		<h2>如果你是工作经验小于2年的朋友6</h2>    
		</div>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery事件操作之给未来元素绑定事件

网友评论