今天用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. Mac OS 系统开发环境的一些坑

    最近换 Mac OS 系统开发,运行项目时遇到各种报错,记录下: 1.拉取项目后,需要安装依赖 npm install ,提示需要安装 xcode,报错如下. 从官网下载 xcode 时提示要更新最新 ...

  2. Codeforces Round #455 (Div. 2) D题(花了一个早自习补了昨晚的一道模拟QAQ)

    D. Colorful Points You are given a set of points on a straight line. Each point has a color assigned ...

  3. PHP mysqli_get_client_version() 函数

    定义和用法 mysqli_get_client_version() 函数将 MySQL 客户端库版本作为整数返回. MySQL 客户端库版本将按照以下格式返回: 主要版本*10000 + 次要版本*1 ...

  4. Hdu 4333 Revolving Digits(Exkmp)

    Revolving Digits Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...

  5. VUE项目引入jquery

    既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...

  6. Pytest学习笔记(二) 用例执行规则

    在用pytest执行用例时,可以按照如下场景来执行 1.执行目录及其子目录下的所有用例 pytest filename\ 2.执行某一个py文件下的用例 pytest filename.py 3.-k ...

  7. BZOJ1005--[HNOI2008]明明的烦恼(树的prufer编码)

    1005: [HNOI2008]明明的烦恼 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5768  Solved: 2253[Submit][Stat ...

  8. Codeforces 959D. Mahmoud and Ehab and another array construction task(构造, 简单数论)

    Codeforces 959D. Mahmoud and Ehab and another array construction task 题意 构造一个任意两个数都互质的序列,使其字典序大等于a序列 ...

  9. Navicat Premium 12 卸载和注册表的删除

    卸载就不用我说了,win10也好,win7也好直接windows设置里的卸载,或者你觉得别的软件卸载的比较干净也行 不过还是不会删掉注册表,甚至文件夹都不删除, ... 这是卸载 ,在此说一下,为了安 ...

  10. H5页面验收流程及性能验收标准

    1,接入方需要保证H5页面兼容性.功能正常以及满足H5约束规范 2,有支付功能的必须要有订单业务以及订单入口,存在有效订单 3,提前X个工作日提交验收,需要抄送相关设计.产品.H5性能验收负责人进行验 ...