jquery事件操作之给未来元素绑定事件
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,我们将及时处理。
微信扫码关注
更新实时通知