专栏首页Vue开发社区如何实现动态添加的元素添加点击事件

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

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

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

本文完

文章分享自微信公众号:
前端开发社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2021-11-10
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)

    1:点击添加按钮弹出弹框,form表单可以填写相关的信息 2:点击保存按钮,相关信息会显示在界面的列表里

    王小婷
  • Android实现动态添加标签及其点击事件

    在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下。

    砸漏
  • 动态添加的html元素绑定事件的方法

    在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二;

    蓓蕾心晴
  • cssjshtml jquery向动态生成的元素添加事件

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    葫芦
  • Android 实现为点击事件添加震动效果

    但是我们光有了帮助类是远远不够的。我们还需要调用他才可以,不然我们的Helper Class 没有任何作用。

    砸漏
  • 为已有点击事件的dom元素添加点击事件,并控制事件函数执行的顺序

    我们大家都知道,一个dom的事件流程是先经过事件捕获,然后到事件本身,最后是事件冒泡

    拿我格子衫来
  • JavaScript系列之实现ul动态添加li元素

    <!doctype html> <html manifest="lab4.manifest"> <head> <title>Mobile Cookbook...

    SmileNicky
  • Calendar calendar控件的月份添加点击事件

    何处锦绣不灰堆
  • Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    xing.org1^
  • 「1 分钟学 DOM 基础操作」添加和移除元素样式、添加至元素内、添加和移除事件、计算鼠标相对元素的位置

    大家好,今天我们来花 1 分钟来学习 DOM 相关的基础操作,内容虽然简单,但是还是有必要归纳总结的,希望这些整理对大家有所帮助。

    前端达人
  • 高德地图添加多个点标注的点击事件

    全栈程序员站长
  • Android编程实现ListView中item部分区域添加点击事件功能

    本文实例讲述了Android编程实现ListView中item部分区域添加点击事件功能。分享给大家供大家参考,具体如下:

    砸漏
  • Oracle 动态添加分区的实现方法

    在数据处理过程中,通常对于数据比较大的表进行分区管理,而分区的依据往往是数据日期,每一天或者每几天数据存储在一个指定的分区中,当数据量一天天增加后,通过分区进行...

    星哥玩云
  • js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交

    (1)在这个页面中,第一个form表单,是开始就有了,第二个是点击按钮后动态添加的,它的判断是否为空是无效的。

    jiankang666
  • JS/jQuery获取不到动态添加的元素节点的解决方法

    今天写了一个添加图片的功能,要求右上角要有删除按钮,我使用 jQuery 动态添加的方式。

    德顺
  • JavaScript给元素添加多个class的简单实现

    当div 中的class 有多个classname时,它会同时应用这几个class定义的CSS样式,那么应用时的优先级是怎么样的?

    浩Coding
  • 如何在 JS 中的数组开头添加元素?

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

    前端小智@大迁世界
  • Java中Set集合是如何实现添加元素保证不重复的?

    Java中Set集合是如何实现添加元素保证不重复的? Set集合是一个无序的不可以重复的集合。今天来看一下为什么不可以重复。 Set是一个接口,最常用的实现类就...

    武培轩

扫码关注腾讯云开发者

领取腾讯云代金券