对于新增加的页面元素,改变了页面结构,如果是使用老办法$("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)无效的更多相关文章

  1. JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度

    封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...

  2. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

  3. java—将查询的结果封装成List<Map>与用回调函数实现数据的动态封装(44)

    手工的开始QueryRunner类.实现数据封装: MapListHandler MapHandler BeanListHandler BeanHandler 第一步:基本的封装测试 写一个类,Que ...

  4. a标签包着img事件 ie下 a标签的click事件失效

    整个大的背景框有个点击事件, 如果标签结构是(详细的css样式略) a{background:green;} <a href=""> <img src=" ...

  5. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

  6. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  7. js动态添加元素绑定事件问题

    //开始是直接普通写的绑定click事件 其中li a i 中的i是动态添加的 结果是触发不了..$("li a i").click(function () { $(this).m ...

  8. SpringBoot27 JDK动态代理详解、获取指定的类类型、动态注册Bean、接口调用框架

    1 JDK动态代理详解 静态代理.JDK动态代理.Cglib动态代理的简单实现方式和区别请参见我的另外一篇博文. 1.1 JDK代理的基本步骤 >通过实现InvocationHandler接口来 ...

  9. 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件,事件无效 解决

    背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...

随机推荐

  1. hdu1051

    #include<iostream> #include<algorithm> using namespace std; struct SIZE { int l; int w; ...

  2. vue 绑定属性(index)

    <el-menu-item v-for="item in links" :key="item.id" v-bind:index="item.id ...

  3. 读《JavaScript权威指南》笔记(一)

    1.Number()  parseInt()  parseFloat() 如果通过Number()转换函数传入一个字符串,它会试图将其转换为一个整数或浮点数直接量,这个方法只能基于十进制数进行转换,并 ...

  4. eclipse中项目已经启动,可是tomcat一直显示在启动中

    一.异常描述 1. 在eclipse中启动tomcat,应用已经启动成功,但是tomcat仍然一直处于starting装填 二.分析原因 1. 更换8080端口为9080,启动tomcat,可以完整启 ...

  5. luogu4168蒲公英(区间众数)

    luogu4168蒲公英(区间众数) 给定n个数,m个区间询问,问每个询问中的众数是什么. 题面很漂亮,大家可以去看一下. 对于区间众数,由于区间的答案不能由子区间简单的找出来,所以似乎不能用树形结构 ...

  6. 在 CentOS7 安装 ELK【转】

    ELK是一个成熟的日志系统,主要功能有收集.分析.检索,详细见 elastic官网. 本文主要介绍如何在CentOS7下安装最新版本的ELK,当然现在docker已经有完全配置成功的elk容器,安装配 ...

  7. uuid安装 插件安装

    yum -y install uuid uuid-devel 安装uuid包tar -zxvf uuid-1.6.1.tar.gzcd uuid-1.6.1./configuremakemake in ...

  8. [转] 出现( linker command failed with exit code 1)错误总结

    这种问题,通常出现在添加第三方库文件或者多人开发时. 这种问题一般是找不到文件而导致的链接错误. 我们可以从如下几个方面着手排查. 1.以如下错误为例,如果是多人开发,你同步完成后发现出现如下的错误. ...

  9. PAT天梯赛L3-007 天梯地图

    题目链接:点击打开链接 本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至 ...

  10. day23作业详解

    1.题目 2.题目详解 点击查看详细内容 1. 1-1 封装 把功能封装到类中 class Message(object): def email(self):pass def msg(self):pa ...