避免先写了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. php 验证所传参数为必填的时候的验证逻辑

    此段代码摘自lumen框架: xx/vendor/illuminate/validation/Validator.php /** * Validate that a required attribut ...

  2. ActiveMQ队列特性:删除不活动的队列(Delete Inactive Destinations)

    方法一 通过 ActiveMQ Web 控制台删除. 方法二 通过 Java 代码删除. ActiveMQConnection.destroyDestination(ActiveMQDestinati ...

  3. AJAX 简单例程示例

    index.html <html> <head> <script> function showHint(str) { if (str.length==0) { re ...

  4. Java编程的逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  5. 115道Java经典面试题(面中率最高、最全)

    115道Java经典面试题(面中率最高.最全) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可 ...

  6. docker启动报错

    1.报“can’t create unix socket /var/run/docker.sock: is a directory” 这是由于存在容器自动启动 --restart= always导致的 ...

  7. 安全运维之:网络实时流量监测工具iftop

    网络管理是基础运维中一个很重要的工作,在看似平静的网络运行中,其实暗流汹涌,要保证业务系统稳定运行,网络运维者必须要了解网络的流量状态.各个网段的使用情形,带宽的利用率.网络是否存在瓶颈等,同时,当网 ...

  8. JDBC setCatalog

    数据库URL:jdbc:mysql://localhost:3306/{catalog} catalog指代数据库名称. 1如果该参数不存在,则必须使用setCatalog设置数据库名称,否则会抛出 ...

  9. PHP开发工程师-技能树

    参考进阶-PHP程序员的技术成长规划-http://blog.csdn.net/heiyeshuwu/article/details/40098043 LNMP / LAMP 环境搭建(单组件安装,非 ...

  10. TiKV 源码解析系列——如何使用 Raft

    本系列文章主要面向 TiKV 社区开发者,重点介绍 TiKV 的系统架构,源码结构,流程解析.目的是使得开发者阅读之后,能对 TiKV 项目有一个初步了解,更好的参与进入 TiKV 的开发中. 需要注 ...