今天用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。 事实上任何标签都可以通过父标签代理监听的方式去监听,或许效果会更好 以上就是固定格式,欢迎来搂~~

JS动态添加的标签无法绑定事件解决方案~~~的更多相关文章

  1. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  2. js动态添加的元素不能绑定事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  3. 动态添加的html元素绑定事件的方法

    避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...

  4. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  5. jQuery给动态添加生成的元素绑定事件的方法

    <div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...

  6. Js 动态添加的数据,监听事件监听不到

    在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...

  7. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  8. Jquery为动态添加的未来元素绑定事件

    语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...

  9. AngularJS如何给动态添加的DOM中绑定事件

    正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿 ...

随机推荐

  1. vim 插件安装

    一.pathogen简介 通常情况下安装vim插件,通常是将所有的插件和相关的doc文件都安装在中一文件夹中,如将插件全部安装在/usr/share/vim/vim73/plugin/目录下,将帮助文 ...

  2. HTML语义化是什么?为什么要语义化?

    HTML语义化HTML的语义化总结为: 用最恰当的标签来标记内容. 该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗.能够实现这种效果的方法有很多,比如用CSS样式进行渲染. ...

  3. 理解Cookie和Session

    HTTP 无状态协议 HTTP 本身是一个无状态的连接协议,无状态的意思是:每条请求/响应都是独立进行的,服务端每处理完一个客户端的请求之后就会断开连接,并且每条请求/响应与其之前(或之后)的请求/响 ...

  4. cmd ora-12560协议适配器错误

    这个问题我解决了很久,其实问题的关键在于我在本机安装了一个Oracle11g数据库以及安装了一个Oracle Client,导致在使用sqlplus / as sysdba链接时出现报协议适配器的错误 ...

  5. python 字符串(str)和列表(list)的互相转换

    1.str to list  str1 = "12345"list1 = list(str1)print list1 str2 = "123 sjhid dhi" ...

  6. 阿里云AHAS应用高可用服务初体验

    AHAS是阿里云提供的应用高可用服务(Application High Availability Service)产品. 高可用这个关键词可以说是互联网及软件开发行业热度一直很高的词语了,阿里云推出的 ...

  7. [go]socket编程

    socket特性 总是成对出现 是全双工的(同时支持收发)(两个channel绑在一起) 应用程序 - cs模式(客户端开发) - bs模式(web开发) net包api基础 都是客户端主动发数据(c ...

  8. Node安装配置

    下载安装nodejs后进行如下配置: 修改模块安装位置和缓存位置在要存放的位置手动新建全局目录node_global在要存放的位置手动新建缓存目录node_cache执行如下命令:npm config ...

  9. PLSQL连接本地oracle或远程oracle数据库,实现随意切换

    转: PLSQL连接本地oracle或远程oracle数据库,实现随意切换 置顶 2018年01月12日 19:36:45 前方一片光明 阅读数 43542   版权声明:本文为博主原创文章,未经博主 ...

  10. docker 搭建私有云盘 Seafile

    缘起 现如今各种云存储服务其实挺多的,国外有经典的DropBox.Google Drive.微软的OneDrive等,国内也有可以免费使用的各种云. 那么为什么想要搭建私有云存储呢?主要是本着“自己的 ...