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 ...
随机推荐
- Python开发【第五篇】:函数
1. 函数 函数是组织好的,可重复使用的,用来实现单一,或相关功能的代码块. 函数分为 Python 程序内置函数,用户自定义的函数.将代码定义为函数,有如下好处: 代码重用(某个特定功能复用 ...
- UE4简单实现描边高亮效果
材质文件下载地址: 链接:https://pan.baidu.com/s/10HUmXR_YNMOTF-Cg4ybuUg 提取码:m1my 1. 将材质文件放到Content目录中 2. 在项目中添加 ...
- 程序员笔记|常见的Spring异常分析及处理
一.前言 相信我们每个人在SpringMVC开发中,都遇到这样的问题:当我们的代码正常运行时,返回的数据是我们预期格式,比如json或xml形式,但是一旦出现了异常(比如:NPE或者数组越界等等),返 ...
- weex前端式写法解决方案---eros
前言 如果想用前端的方式写一个app怎么办呢? 如果你用的是 React,那么它已经有了一个比较完善的体系跟社区.如果你用的是Vue又不想花费太多时间去重新学习React,那么目前比较靠谱的方案就是w ...
- unity 3d 之合并网格和贴图(combine mesh and texture)
https://www.cnblogs.com/eangulee/p/3877824.html unity 3d 之合并网格和贴图(combine mesh and texture) 本人是个小白 ...
- [转]centos7.2 下 nginx 开机启动
1.在系统服务目录里创建nginx.service文件 vi /lib/systemd/system/nginx.service 内容如下 [Unit] Description=nginx After ...
- 洛谷P3802 小魔女帕琪
P3802 小魔女帕琪 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组合,从 ...
- python-django框架中使用七牛云
1:注册七牛云账号 https://www.qiniu.com/ js文件 链接:https://pan.baidu.com/s/1BW1svHqEsXrrTNtRobKkpg 提取码:ixta 2 ...
- 解读人:李思奇,Development of a sensitive, scalable method for spatial, cell-type-resolved proteomics of the human brain. (一种用于研究人类大脑基于空间或细胞类型的蛋白质组学的灵敏方法)
发表时间:(2019年4月) 一. 概述: 本文报道了一种可研究人类大脑组织中特定神经细胞的蛋白质组学的方法.作者通过激光捕获显微切割技术(LCM)从逝者大脑中分离出目的神经元细胞,接着尝试了一系列不 ...
- 在 CentOS7 安装 ELK【转】
ELK是一个成熟的日志系统,主要功能有收集.分析.检索,详细见 elastic官网. 本文主要介绍如何在CentOS7下安装最新版本的ELK,当然现在docker已经有完全配置成功的elk容器,安装配 ...