jq动态增加的button标签click回调失效的问题,即动态增加的button标签绑定事件$("button.class").click(function)无效
对于新增加的页面元素,改变了页面结构,如果是使用老办法$("button.class").click(function)去监听新的button标签事件,会失效。
笔者的应用是文字的显示和隐藏之间的切换,给出我的代码:
解决办法:
$(document).on("click",".showPwd",function () {
// alert("show now:" + );
$(this).parent().html(
$(this).attr("key")+' '+
'<button class="btn btn-default btn-sm hidePwd" key="'+$(this).attr("key")+'"><span class="glyphicon glyphicon-eye-close"></span></button>');
});
$(document).on("click",".hidePwd",function () {
//alert("show now");
$(this).parent().html('<button class="btn btn-default btn-sm showPwd" key="'+$(this).attr("key")+'"><span class="glyphicon glyphicon-eye-open"></span></button>');
});
jq动态增加的button标签click回调失效的问题,即动态增加的button标签绑定事件$("button.class").click(function)无效的更多相关文章
- JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...
- js、jq事件绑定方式总结——以click事件为例
一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...
- java—将查询的结果封装成List<Map>与用回调函数实现数据的动态封装(44)
手工的开始QueryRunner类.实现数据封装: MapListHandler MapHandler BeanListHandler BeanHandler 第一步:基本的封装测试 写一个类,Que ...
- a标签包着img事件 ie下 a标签的click事件失效
整个大的背景框有个点击事件, 如果标签结构是(详细的css样式略) a{background:green;} <a href=""> <img src=" ...
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js动态添加元素绑定事件问题
//开始是直接普通写的绑定click事件 其中li a i 中的i是动态添加的 结果是触发不了..$("li a i").click(function () { $(this).m ...
- SpringBoot27 JDK动态代理详解、获取指定的类类型、动态注册Bean、接口调用框架
1 JDK动态代理详解 静态代理.JDK动态代理.Cglib动态代理的简单实现方式和区别请参见我的另外一篇博文. 1.1 JDK代理的基本步骤 >通过实现InvocationHandler接口来 ...
- 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件,事件无效 解决
背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...
随机推荐
- Access denied for user 'xxx'@'localhost' 问题的解决方法
使用SpringMvc + Mybatis + Mysql搭建的架构,调试时出现了以下错误: HTTP Status 500 - Request processing failed; nested e ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- 如何在MySQL中设置外键约束
引用:http://blog.sina.com.cn/s/blog_53729e4601011wja.html MySql外键设置详解 (1) 外键的使用: 外键的作用,主要有两个: 一个是 ...
- 洛谷P3145 [USACO16OPEN]分割田地Splitting the Field
P3145 [USACO16OPEN]分割田地Splitting the Field 题目描述 Farmer John's NN cows (3 \leq N \leq 50,0003≤N≤50,00 ...
- android--系统路径获取
Environment 常用方法: * 方法:getDataDirectory()解释:返回 File ,获取 Android 数据目录.* 方法:getDownloadCacheDirectory( ...
- 我的省选 Day -10
Day -10 今天的分数也许会比昨天更低.. 感觉2017年比远古时代的2007年的第一试难诶. 估个分数好了,我猜88分(为什么猜了一个这么吉利的数字??到时候出来没几分就啪啪啪打脸了) 和昨天一 ...
- 分层图最短路【bzoj2834】: 回家的路
分层图最短路[bzoj2834]: 回家的路 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2834 这道题难在建边. 自己写的时候想到了 ...
- sql 查找重复数据,并且重复数据有子集
SELECT A.* FROM comm_department A INNER JOIN ( select path,count(*) as count from comm_department gr ...
- Memento模式(备忘录设计模式)
Memento模式? 使用面向对象编程的方式实现撤销功能时,需要事先保存实例的相关状态信息.然后,在撤销时,还需要根据所保存的信息将实例恢复至原来的状态.这个时候你需要使用Memento设计模式.(以 ...
- 安装mongodb并配置
下载网址http://dl.mongodb.org/dl/win32/x86_64 mongodb-win32-x86_64-2008plus-ssl-v3.4-latest.zip 解压d盘命名mo ...