QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2202|回复: 0

[HTML/CSS/JS] 如何实现动态添加的元素添加点击事件

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1321 小时
   最后登录 : 2025-7-9

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-10-26 08:14:12 | 显示全部楼层 |阅读模式
       在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?, Q! N' d. f1 b/ e- z
一、原生JavaScript
2 [9 g& i. h3 ]! l0 x       原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。 6 [% ~( L2 ^7 b& @0 `, i; r$ u& c4 X
       第二种是通过事件委托的原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。' @1 z/ u4 M. l+ I
第一:onclick* I, ]: Q8 s% u9 F8 q9 H" V' R( C
<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:% ^4 H+ A9 a/ T3 G7 A
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实现1 W) i0 H8 R1 n9 u+ O- I
       从 jQuery 1.7 开始,您应该使用on的方式,语法如下:
( A9 n( G; S: q8 w9 Z$ @- i* H
$(staticAncestors).on(eventName, dynamicChild, function() {});
解释:8 H- T, k) f9 I1 F5 Q
       这称为事件委托,其工作原理如下。该事件附加到staticAncestors应处理的元素的静态父级 ( )。每次在此元素或后代元素之一上触发事件时,都会触发此 jQuery 处理程序。然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时,您的自定义处理程序函数将被执行。
& w) M' z% q, \3 K" R% Z$ j% @- r2 D       在此之前,推荐的方法是使用live():; c; Z; |7 Y) F. X5 m* ^- @
$(selector).live( eventName, function(){} );
      然而,live()在 1.7 中被弃用on(),而在 1.9 中被完全删除。
5 [8 D' N; h9 y3 C
$(selector).live( eventName, function(){} );
      可以替换为以下on()方法:
+ q4 W& B0 ?) H: R. D" g
$(document).on( eventName, selector, function(){} );
      例如,如果您的页面使用类名动态创建元素,dosomething您会将事件绑定到已经存在的父级(这是这里问题的核心,您需要绑定到存在的东西,不要绑定到动态内容),这可以(也是最简单的选项)是document. 尽管记住document可能不是最有效的选择。: N' K1 E2 q2 }. ]
$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});
      事件绑定时存在的任何父级都可以。例如" Q0 w% m0 i* T* R1 X5 N
$('.buttons').on('click', 'button', function(){
    // do something here
});
      将适用于
3 @0 b1 y9 w" P" U5 {, g
<div>
    <!-- <button>s that are generated dynamically and added here -->
</div>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-9-13 15:33

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表