避免先写了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. IOS 地图移动中心点获取

    MKMap显示地图后,如果用户移动了地图,自己定义的数据就需要刷新了,所以这个时候,中心点的经纬度就比较重要了. 本文演示如何获取经纬度 在MKMapViewDelegate里有个方法 - (void ...

  2. wamp安装xdebug特殊情况win7 64位安装32位wamp

    在wamp上安装xdebug网上很多文章都介绍了方法,但是我这里遇到了一个很特殊的情况,在网上很少有人提及: 我机器是win7 64位的,安装的wamp1.7.4是32位的,这是后来导致出现奇怪现象的 ...

  3. cas单点登录-CAS5.1.3 overlay服务器搭建(二)

    前言    本节主要讲解怎么搭建cas服务端,并且在浏览器中使用https访问cas服务端 1.通过cas代码生成工具(https://casinitializr.herokuapp.com/),生成 ...

  4. linux命令实现http的get和post请求

    1. wget wget -O -  "http://$IP/host" --header="Content-Type: application/json" - ...

  5. Knockout开发中文API系列1

    从本节开始介绍关于KnockoutJs相关的内容,本节主要介绍knockoutjs一些重要特性与优点,以及它与Jquery等框架库之间的区别. 1.Knockout.js是什么? Knockout是一 ...

  6. JProfiler远程监控Linux上Tomcat的安装过程细讲(步骤非常详细!!!)

    JProfiler远程监控Linux上Tomcat的安装过程细讲(步骤非常详细!!!) 1.文件准备: 服务器:CentOS Linux release 7.3.1611 (Core)     Apa ...

  7. 手动释放linux内存cache

    总有很多朋友对于Linux的内存管理有疑问,之前一篇linux下的内存管理方式似乎也没能清除大家的疑虑.而在新版核心中,似乎对这个问题提供了新的解决方法,特转出来给大家参考一下.最后,还附上我对这方法 ...

  8. DevExpress控件安装和初次使用图解

    安装: 解压后包含这么多东东.执行选中的那个: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fil ...

  9. 【oneday_onepage】——Microsoft adds a wing, more closets to the homes of SharePoint Online tenants

    To prevent SharePoint Online customers from feeling boxed in, Microsoft wants to improve the way the ...

  10. elasticsearch6.4 memory locking requested for elasticsearch process but memory is not locked

    [2018-10-18T05:28:57,713][ERROR][o.e.b.Bootstrap ] [node-45] node validation exception[1] bootstrap ...