动态添加的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事件先是获取到父元素,然后绑定到子元素上,父元素最好是已经存在的元素,而不是动态添加的。
动态添加的html元素绑定事件的方法的更多相关文章
- jQuery给动态添加生成的元素绑定事件的方法
<div id="testdiv"> <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...
- jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...
- Jquery为动态添加的未来元素绑定事件
语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- 【原生js】js动态添加dom,如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
- JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
- jquery:为动态加载的元素绑定事件
最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件.我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的. 解决方案: 通过Go ...
随机推荐
- IOS 地图移动中心点获取
MKMap显示地图后,如果用户移动了地图,自己定义的数据就需要刷新了,所以这个时候,中心点的经纬度就比较重要了. 本文演示如何获取经纬度 在MKMapViewDelegate里有个方法 - (void ...
- wamp安装xdebug特殊情况win7 64位安装32位wamp
在wamp上安装xdebug网上很多文章都介绍了方法,但是我这里遇到了一个很特殊的情况,在网上很少有人提及: 我机器是win7 64位的,安装的wamp1.7.4是32位的,这是后来导致出现奇怪现象的 ...
- cas单点登录-CAS5.1.3 overlay服务器搭建(二)
前言 本节主要讲解怎么搭建cas服务端,并且在浏览器中使用https访问cas服务端 1.通过cas代码生成工具(https://casinitializr.herokuapp.com/),生成 ...
- linux命令实现http的get和post请求
1. wget wget -O - "http://$IP/host" --header="Content-Type: application/json" - ...
- Knockout开发中文API系列1
从本节开始介绍关于KnockoutJs相关的内容,本节主要介绍knockoutjs一些重要特性与优点,以及它与Jquery等框架库之间的区别. 1.Knockout.js是什么? Knockout是一 ...
- JProfiler远程监控Linux上Tomcat的安装过程细讲(步骤非常详细!!!)
JProfiler远程监控Linux上Tomcat的安装过程细讲(步骤非常详细!!!) 1.文件准备: 服务器:CentOS Linux release 7.3.1611 (Core) Apa ...
- 手动释放linux内存cache
总有很多朋友对于Linux的内存管理有疑问,之前一篇linux下的内存管理方式似乎也没能清除大家的疑虑.而在新版核心中,似乎对这个问题提供了新的解决方法,特转出来给大家参考一下.最后,还附上我对这方法 ...
- DevExpress控件安装和初次使用图解
安装: 解压后包含这么多东东.执行选中的那个: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fil ...
- 【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 ...
- 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 ...