避免先写了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事件先是获取到父元素,然后绑定到子元素上,父元素最好是已经存在的元素,而不是动态添加的。

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

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

    <div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...

  2. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  3. Jquery为动态添加的未来元素绑定事件

    语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...

  4. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  5. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

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

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

  7. 关于动态添加的html元素绑定的事件不生效的解决办法

    1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...

  8. JS动态添加的标签无法绑定事件解决方案~~~

    今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...

  9. jquery:为动态加载的元素绑定事件

    最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件.我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的. 解决方案: 通过Go ...

随机推荐

  1. shell中date使用总结-基于自动定期备份mysql实践

    ------------------------时间的格式 date [OPTION]... [+FORMAT] echo `date 空格 +'时间格式串'` 调用date必须加符号反引号``,表示 ...

  2. where子查询

    限定查询(WHERE子句) 之前的查询是将一张表的全部记录查询出来,那么现在如果希望可以根据指定的条件查询的话,则必须指定限定查询. 格式: 的雇员的信息 l  使用“<>”完成 l  S ...

  3. 采用dlopen、dlsym、dlclose dlopen dlerror加载动态链接库【总结】

    .前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主程序逻辑不变,将各个业务已动态链接库的形式加载进来,这就是所谓的插件.linux提供了加载和处理动态链接库的系统调 ...

  4. if else练习 (解一元二次方程)

    public class cccc { /** * @param args */ public static void main(String[] args) { int a=10,b=11,c=12 ...

  5. Android训练课程(Android Training) - 测试你的Android Activity

    你应该开始编写和启动测试作为你的android程序开发周期的一部分.写的好的测试能够帮助你更早的发现bug和使你对你的代码有信心. 一个测试用例定义了一些对象和方法的集合,用于启动多样的彼此独立的测试 ...

  6. TIDB介绍 新数据库趋势

    TIDB是什么? TIDB 受谷歌Spanner和F1的论文启发的new sql数据库,这类数据库不仅具有NoSQL对海量数据的存储管理能力,还保持了传统数据库支持ACID和SQL等特性,同类数据库还 ...

  7. linq操作符:元素操作符

    元素操作符仅返回一个元素. 一.Fitst操作符 First操作符将返回序列中的第一个元素.如果序列中不包含任何元素,则First<T>方法将引发异常.来看看First()方法的定义: 从 ...

  8. struts2 拦截器配置

    CheckLoginInterceptor.java---拦截器具体实现类: package com.sunhoo.hcpms.struts2.action.interceptors; import  ...

  9. Java 应该被记住的8位大人物

    这里列举了 8 个 Java 人物,他们创建了对 Java 社区贡献很大的框架.产品.工具和图书,也因此改变了 Java 的编码方法. 8. Tomcat 和 Ant 创办人 James Duncan ...

  10. SSD 固态硬盘,Trim指令 ,查看状态、开启、关闭

    一说到SSD 固态硬盘,经常会看到Trim指令这个名词,那什么是Trim?   Trim是什么? 为了解决硬盘降速的问题,微软联合各大SSD厂商开发了一个新技术——Trim.Trim指令也叫disab ...