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/post/7439.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知