本文实例讲述了 JS 实现为动态添加的元素增加事件功能分享给大家供大家参考, 具体如下:
我们在日常开发中有时会通过 js 创建一些元素, 但是如果使用原始的 for 循环给创建的节点添加事件的方法往往行不通:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>www.jb51.net js 动态添加事件</title>
- </head>
- <body>
- <ul id="out-ul">
- <li class="out-li">123</li>
- <li class="out-li">123</li>
- <li class="out-li">123</li>
- </ul>
- <button id="btn">添加</button>
- <script>
- document.getElementById('btn').addEventListener('click',function(){
- var htmlFragment='<li > 我是新增的 li</li>';
- var addLi=document.createElement('li');
- addLi.innerHTML=htmlFragment;
- outUl.appendChild(addLi);
- },false);
- var outUl=document.getElementById('out-ul')
- var outLi=outUl.getElementsByClassName('out-li');
- for(var i=0;i<outLi.length;i++){
- outLi[i].onclick=function(){
- alert(1);
- }
- }
- </script>
- </body>
- </html>
运行效果:
比如这样, 通过 for 循环给 li 添加的事件无法绑定到新增的 li 上边, 详细的原因这里不做解释那么这个如何解决呢, 其实办法也简单, 就是通过事件委托的方式去解决, 直接上代码, 上面的代码简单改造:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>www.jb51.net js 动态添加事件</title>
- </head>
- <body>
- <ul id="out-ul">
- <li class="out-li">123</li>
- <li class="out-li">123</li>
- <li class="out-li">123</li>
- </ul>
- <button id="btn">添加</button>
- <script>
- var outUl=document.getElementById('out-ul')
- var outLi=outUl.getElementsByClassName('out-li');
- document.getElementById('btn').addEventListener('click',function(){
- var htmlFragment='<li > 我是新增的 li</li>';
- var addLi=document.createElement('li');
- addLi.innerHTML=htmlFragment;
- outUl.appendChild(addLi);
- },false);
- outUl.addEventListener('click',function(e){
- e=e || window.event;// 兼容 ie
- alert(e.target.innerHTML);
- }, false);
- </script>
- </body>
- </html>
运行效果:
这样一来, 即便是新增的 li 点击事件也可以被触发了, 不过在这里 jquery 的详细方式就不做介绍了, 原生 js 跟 jquery 的解决原理其实是一样的相信大家把原生的理解了, jquery 的方式也可以很好的理解
PS: 关于 javascript 事件说明可参考本站 javascript 事件与功能说明大全: http://tools.jb51.net/table/javascript_event
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题: JavaScript 页面元素操作技巧总结 JavaScript 操作 DOM 技巧总结 JavaScript 查找算法技巧总结 JavaScript 数据结构与算法技巧总结 JavaScript 遍历算法与技巧总结及 JavaScript 错误与调试技巧总结
来源: http://www.jb51.net/article/136842.htm