在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?
1 c3 M" C+ O% e) i! Z3 [0 B一、原生JavaScript o' J' d! I6 ^
原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。
( n) W! `( ~0 r2 R' |! U! D 第二种是通过事件委托的原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。' j& h o3 L) R0 a3 \
第一:onclick
! y) n e2 E" Q! a" X
-
- <body>
- <button onclick="AddJob()">添加工作经历</button>
- <button onclick="GetJobs()">获取全部工作</button>
-
- <div id="joblist">
- <div id="job1" class="job">
- <input name="CompanyName" type="text" value="公司1" />
- <button onclick="DelJob(1)">删除</button>
- </div>
- </div>
- <script type="text/JavaScript">
- //添加工作经历
- function AddJob() {
- var timestamp = parseInt((new Date()).valueOf()); //唯一的标识
- console.log(parseInt((new Date()).valueOf()));
- document.getElementById("joblist").innerhtml +=
- `<div id="job` + timestamp + `" class="job">
- <input name="CompanyName" type="text" value="公司` + timestamp + `" />
- <button onclick="DelJob(` + timestamp + `)">删除</button>
- </div>`;
- }
- //删除工作经历
- function DelJob(timestamp) {
- document.getElementById("job" + timestamp).remove();
- }
- //获取全部工作经历
- function GetJobs() {
- var jobs = document.getElementsByClassName("job");
- var arr = [];
- for (var i = 0; i < jobs.length; i++) {
- var job = jobs[i];
- var companyName = job.children[0].value;
- arr.push(companyName);
- }
- console.log(arr);
- alert(arr);
- }
- </script>
- </body>
第二种addEventListener: ` V+ W$ _3 b8 f8 s! J
- document.getElementById('joblist').addEventListener('click', function (ev) {
- var target = ev.target || ev.srcElement;
- if (target.nodeName.toLowerCase() == 'button') {
- var e = document.getElementById(target.parentNode.id);
- document.getElementById("joblist").removeChild(e);
- }
- });
二、jquery实现
, B2 o6 r) g3 J& d( l; j 从 jQuery 1.7 开始,您应该使用on的方式,语法如下: 9 N; ?. }3 L! }& \5 U$ m) ?
- $(staticAncestors).on(eventName, dynamicChild, function() {});
解释:
( X7 W8 d% ~' F2 A$ N3 w 这称为事件委托,其工作原理如下。该事件附加到staticAncestors应处理的元素的静态父级 ( )。每次在此元素或后代元素之一上触发事件时,都会触发此 jQuery 处理程序。然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时,您的自定义处理程序函数将被执行。
]( F0 U r7 z$ M6 _0 D: i 在此之前,推荐的方法是使用live():
4 C" ]; g4 ~( D% [# Z( _- $(selector).live( eventName, function(){} );
然而,live()在 1.7 中被弃用on(),而在 1.9 中被完全删除。 8 P4 M3 z# t9 D5 W& B! c3 G/ z8 I
- $(selector).live( eventName, function(){} );
可以替换为以下on()方法: ) Q8 _ X( l" p
- $(document).on( eventName, selector, function(){} );
例如,如果您的页面使用类名动态创建元素,dosomething您会将事件绑定到已经存在的父级(这是这里问题的核心,您需要绑定到存在的东西,不要绑定到动态内容),这可以(也是最简单的选项)是document. 尽管记住document可能不是最有效的选择。
( m( ?0 k3 k+ b( o+ e5 f- $(document).on('mouseover mouseout', '.dosomething', function(){
- // what you want to happen when mouseover and mouseout
- // occurs on elements that match '.dosomething'
- });
事件绑定时存在的任何父级都可以。例如 # q, Q- s `0 b8 n I/ h
- $('.buttons').on('click', 'button', function(){
- // do something here
- });
将适用于
1 P7 N+ C: F+ M; j, F2 ~7 {, e- <div>
- <!-- <button>s that are generated dynamically and added here -->
- </div>
|