专栏首页前端小叙动态添加的html元素绑定事件的方法

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

避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个:

1、动态添加的时候加行内事件,比如onclick="funcName()"

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

2、jquery的on事件绑定

eg:

on事件可以给动态添加的元素也绑定事件。
$("#optionGroup").on('click','.input-group .delete-option',function () {
    console.log("aaa")
    let num = $(this).parents(".input-group").index();
    console.log(num)
})

注意:on事件先是获取到父元素,然后绑定到子元素上,父元素最好是已经存在的元素,而不是动态添加的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”)。将一小段跟踪代...

    蓓蕾心晴
  • 事件绑定的几种常见方式

    在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发。 1.事件绑定的几种常见方式(以click事件为例) jquery: $(select...

    蓓蕾心晴
  • CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 tr...

    蓓蕾心晴
  • 02-老马jQuery教程-jQuery事件处理

    在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

    老马
  • 02-老马jQuery教程-jQuery事件处理

    1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

    老马
  • jQuery 事件绑定 和 JavaScript 原生事件绑定

    jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,

    Krry
  • 自己动手写客户端UI库——事件机制(设计思路大放送)

    在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 ...

    liulun
  • 黑科技小程序,无需前台登记直接刷脸秒住酒店!

    ? 相信大家都有过出去住酒店略不爽的经历,就是在酒店前台办理入住或退房要等不少时间,人多的时候还要等更久。因为前台需要确认你的入住订单,没问题了再刷脸登记身份...

    腾讯技术工程官方号
  • 前端基础-jQuery简单事件绑定

    cwl_java
  • 逻辑卷管理器LVM

    版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gon...

    魏晓蕾

扫码关注云+社区

领取腾讯云代金券