最近做的项目要实现一个动态添加动态删除的功能，思考了一下，该怎么给动态添加的元素绑定事件。最后觉得有两种方式比较可靠，第一种是在动态添加的html代码里添加oclick事件，然后给传个唯一的参数来判断点击了哪个，然后做相应的操作，第二种是通过事件委托的原理来处理，事件委托将一个事件侦听器实际绑定到整个容器，然后在单击它时能够访问每个列表项，这种更高效一些

具体的代码实现如下：

第一：onclick

 <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>

第二种：事件委托

 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);

         }

     });

js动态添加的元素绑定事件的更多相关文章

  1. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  4. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  5. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  6. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  7. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  8. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  9. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

随机推荐

  1. 【leetcode】719. Find K-th Smallest Pair Distance

    题目如下: 解题思路:对于这一类知道上限和下限,求第N位是什么的题目,可以先看看二分查找的方法可不可行.首先对nums进行排序,很显然任意两个元素距离绝对值最小是0,最大是nums[-1] - num ...

  2. IDEA不认识jstl

    解决方案:一.在pom.xml文件查看是否<packaging>的值是否是war  二:在jsp文件中加上这句话. <%@page isELIgnored="false&q ...

  3. Oracle序列重置

    Oracle 中的序列我们一般用来生成流水号,所以需要进行重置(如每天凌晨重置一次),我们虽然可以通过重新编译的方式重置序列,可是这种方法会有弊端,比如导致与该序列相关的存储过程或函数失效等等,需要重 ...

  4. BUUCTF | 高明的黑客

    这一题一开始我没有理解"www.tar.gz"的涵义,还以为有一个其他的网站叫这个,后来才突然顿悟他也有可能是一个目录!!!地址栏输入”/www.tar.gz“ 然后就可以得到源码 ...

  5. Python 进阶_生成器 & 生成器表达式

    目录 目录 相关知识点 生成器 生成器 fab 的执行过程 生成器和迭代器的区别 生成器的优势 加强的生成器特性 生成器表达式 生成器表达式样例 小结 相关知识点 Python 进阶_迭代器 & ...

  6. 使用Excel表格的记录单功能轻松处理工作表中数据的方法

    使用Excel表格的记录单功能轻松处理工作表中数据的方法 记录单是将一条记录分别存储在同一行的几个单元格中,在同一列中分别存储所有记录的相似信息段.使用记录单功能可以轻松地对工作表中的数据进行查看.查 ...

  7. 爱奇艺面试Python，竟然挂在第5轮…(转）

    今天给大家分享我曾经在爱奇艺的面试,过程还是比较有意思的,可以给大家一些参考 聊骚阶段 嗲妹妹:你好,我是爱奇艺的HR,我们正在招聘运维开发岗位,请问您最近有在看工作机会吗? 我:(这声音也太酥了吧我 ...

  8. MongoDB 3.6 开启慢查询

    参考:Profiling Levels:支持一下级别.0 默认的profiler level,profiler 关闭并且不收集数据.1 profiler 收集超过slowms的操作数据.2 profi ...

  9. bootstrap基础模板页面,详细注释

    ​ <!--html5 骨架--> <!DOCTYPE html> <!--语言是中文简体--> <html lang="zh-cn"&g ...

  10. HDU3951_Coin Game

    Coin Game Problem Description 一堆n个硬币围成一圈,两个人轮流拿走连续k个硬币,拿走最后一堆的人获胜 问你第一个人获胜还是第二个 思路: 这是NIM游戏改编版本 但是道理 ...