今天用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. 立即执行函数与For. . .in语句

    ㈠立即执行函数 ⑴定义:在函数定义完,立即被调用,这样的函数叫做立即执行函数 ⑵语法:函数对象() ⑶注意:立即执行函数往往只会执行一次 ⑷示例1: (function(){ alert(" ...

  2. HGOI 20191031am 题解

    Problem A Divisors 给出$m$个不同的正整数$a_i$,设数论函数 ​​​$f(k) = \sum\limits_{i = 1}^{n} [(\sum\limits_{j = 1}^ ...

  3. 【转载】BERT:用于语义理解的深度双向预训练转换器(Transformer)

    BERT:用于语义理解的深度双向预训练转换器(Transformer)   鉴于最近BERT在人工智能领域特别火,但相关中文资料却很少,因此将BERT论文理论部分(1-3节)翻译成中文以方便大家后续研 ...

  4. MySQL 5.7半同步复制技术

    一.复制架构衍生史 在谈这个特性之前,我们先来看看MySQL的复制架构衍生史. 在2000年,MySQL 3.23.15版本引入了Replication.Replication作为一种准实时同步方式, ...

  5. Go 通道(channel)与协程间通信

    协程间通信 协程中可以使用共享变量来通信,但是很不提倡这样做,因为这种方式给所有的共享内存的多线程都带来了困难. 在 Go 中有一种特殊的类型,通道(channel),就像一个可以用于发送类型化数据的 ...

  6. 移动端——link标签

    meta标签中提到了部分功能要结合link标签进行使用,link标签主要是存放CSS文件的地方,同时还有一些专属的移动端设置. <meta http-equiv="Content-Ty ...

  7. express使用ejs模板引擎渲染html文件

    小场景小知识点. 在使用express过程中,按照官网教程,利用express生成器很容易初始化express项目模板. 那么初始化项目之后应该如何使用ejs作为模板引擎呢?如下 // 注释掉默认生成 ...

  8. Django连接MySQL出错

    错误一:No module named 'MySQLdb' 原因:python3连接MySQL不能再使用mysqldb,取而代之的是pymysql. 解决方法:在python的MySQL包中,即路径: ...

  9. linux下如何查看当前内核的配置?

    答: zcat /proc/config.gz 当然有个前提条件,需要打开内核的以下两个选项(CONFIG_IKCONFIG和CONFIG_IKCONFIG_PROC): General setup ...

  10. springboot 整合logback(有全套的日志配置文件)

    logback介绍:基于Log4j基础上大量改良,不能单独使用,推荐配合日志框架SLF4J来使用,可以和springboot很好的整合,也是springboot默认推荐的. 1.在resources ...