JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现
这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的!
看了看网上的解决方案,似乎都不太通俗,讲的也不周全,记录一下,这是成长的印记!
废话不多说,直接看问题上方案!
<tbody> <tr> <th><a href=""></a></th> </tr></tbody>//如上述代码中tr标签及th标签都是通过JS代码动态添加的,这时候我们又需要监听a标签的点击事件//通过下面的监听方式是无法实现的$("a").on("click",func(){})//由此我们需要通过对非动态父标签或者祖先级标签来监听子标签实现
解决方案!!
$(‘tbody‘).on("click","a",function(){ alert(this.id);})
代码解析:既然无法直接监听动态插入的标签,那我们就通过代理监听,也就是通过非动态插入的父标签对子标签进行监听。
$(‘tbody‘) 对应的tbody标签是非动态插入的祖先级标签,切记,这里的父级标签一定是非动态的!!!!
"a" 标签即我们需要监听的标签,可以通过其他选择器来查找标签,比如id或者类等等,这里只是用标签查找做演示。在函数体内我alert了this.id, 有的人对这个this不理解,它到底指的是谁,我也曾有这个疑惑,但百度的博客似乎没人讲清楚 其实这个 this 指的就是 a 标签本身, this.id就是a标签的id。以上就是固定格式,欢迎来搂~~
相关内容
-
什么是boot.ini文件错误ini的非法解决方案
什么是boot.ini文件错误ini的非法解决方案,,千奇百怪的电脑问...
-
添加删除程序不能做如何添加和删除程序错误的解
添加删除程序不能做如何添加和删除程序错误的解决方案,,最近,一...
-
计算机不能打开网页发送更多的数据包,但很少收到
计算机不能打开网页发送更多的数据包,但很少收到(解决方案)。,,问...
-
计算机蓝屏故障的计算机蓝屏解决方案
计算机蓝屏故障的计算机蓝屏解决方案,,电脑蓝屏电脑故障经常使...
-
国产首创!龙腾光电推出6.8英寸动态防窥手机屏
国产首创!龙腾光电推出6.8英寸动态防窥手机屏,WPS教程, 今天...
-
无法打开网络正常网页的解决方案
无法打开网络正常网页的解决方案,,昨天我在一家电脑公司做了一...
-
斑马打印机官方网站|斑马标签打印机官网
斑马打印机官方网站|斑马标签打印机官网,,斑马标签打印机官网...
-
MacChrome打开HTTPS证书错误解决方案
MacChrome打开HTTPS证书错误解决方案,,评论:在Chrome浏览器下,总...
-
三常见BIOS故障排除解决方案
三常见BIOS故障排除解决方案,,笔记本电脑如何长时间出现黑屏为...
-
wps单独打开标签|wps单独打开多个文档,不喜欢在
wps单独打开标签|wps单独打开多个文档,不喜欢在一个窗口显示...
-
磁盘读取错误发生错误计算机无法启动(解决方案)
磁盘读取错误发生错误计算机无法启动(解决方案),,故障现象: 计算...
-
计算机无法识别SATA硬盘计算机来检测SATA硬盘(解
计算机无法识别SATA硬盘计算机来检测SATA硬盘(解决方案)。,,故障...
-
路由器常见问题及解决方案
路由器常见问题及解决方案,, ...
-
对计算机无反应的解决方案
对计算机无反应的解决方案,,(1)从计算机中取出计算机最常用的方...
-
电脑游戏出现蓝屏或自动退出(解决方案)
电脑游戏出现蓝屏或自动退出(解决方案),,故障现象: 玩电脑游戏,Ji...