如何实现动态添加的元素添加点击事件

共 2976字，需浏览 6分钟

· 2021-10-26

在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？

原生JavaScript

原生JavaScript主要有2种实现方式，第一种是在动态添加的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>

第二种addEventListener：


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

从 jQuery 1.7 开始，您应该使用on的方式，语法如下：


$(staticAncestors).on(eventName, dynamicChild, function() {});

解释：

这称为事件委托，其工作原理如下。该事件附加到staticAncestors应处理的元素的静态父级 ( )。

每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。

然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时，您的自定义处理程序函数将被执行。

在此之前，推荐的方法是使用live()：


$(selector).live( eventName, function(){} );

然而，live()在 1.7 中被弃用on()，而在 1.9 中被完全删除。


$(selector).live( eventName, function(){} );

可以替换为以下on()方法：


$(document).on( eventName, selector, function(){} );

例如，如果您的页面使用类名动态创建元素，dosomething您会将事件绑定到已经存在的父级（这是这里问题的核心，您需要绑定到存在的东西，不要绑定到动态内容），这可以（也是最简单的选项）是document. 尽管记住document可能不是最有效的选择。


$(document).on('mouseover mouseout', '.dosomething', function(){    // what you want to happen when mouseover and mouseout     // occurs on elements that match '.dosomething'});

事件绑定时存在的任何父级都可以。例如


$('.buttons').on('click', 'button', function(){    // do something here});

将适用于


<div>    <!-- <button>s that are generated dynamically and added here --></div>

本文完

学习更多技能
请点击下方公众号