jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html
最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论。这里使用了动态加载的<span mid=’123456789′ class=’get_comment’>点击加载评论</span>。
然后再写
$(“.get_comment).click(function(){
//响应事件逻辑
})
,发现click事件并不会触发,使用控制台侦听也木有错误。百思不得其解时,将焦点落在动态加载上。
于是,使用jquery的live()函数,重写响应逻辑:
这时候,jquery可以响应span 的click事件了。这里用到live函数委派事件,主要用于动态生成的HTML的事件响应。关于live()函数的作用,它最直观的好处在于可以一直“监听”客户端浏览器操作,对于新增的DOM节点也会有效,而不需要重新绑定。也许是因为这个“监听”可能会不断的去绑定、判断,会造成web应用性能问题,大家可以根据项目的复杂性选择性使用。关于live函数,这里有非常详细的阐述:
定义和用法
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
语法
$(<em>selector</em>).live(<em>event</em>,<em>data</em>,<em>function</em>)
参数 | 描述 |
---|---|
event |
必需。规定附加到元素的一个或多个事件。
由空格分隔多个事件。必须是有效的事件。 |
data | 可选。规定传递到该函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
转载于:https://www.cnblogs.com/wangjiangze/p/3284515.html
jquery 动态生成html后click事件不触发原因相关推荐
- 动态生成数据后绑定事件
HTML代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta chars ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() {alert(this.va ...
- 动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...
- jquery动态渲染绑定点击事件不生效
原因:动态添加的HTML元素是在CSS,JS代码加载完成后再渲染的HTML页面.浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时,这时绑定事件的标签元素还没有生成 ...
- jquery 动态按钮绑定点击事件
一.Jquery实现点击事件的四种写法 来自:https://blog.csdn.net/liutianjie/article/details/85112787 1. $(".tab&quo ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
- jQuery动态生成select下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
- wap开发问题总结(ios中click事件无法触发、身份证分隔、倒计时、验证码分隔等)
需求背景:用户在通过短信验证码方式注册或者登陆时,存在二次卡场景(运营商回收原机主不用的手机号,存放三个月后,再次开放给新机主),导致新机主可以登录原机主账号,如果原机主不换绑手机.二次卡判断条件:手 ...
最新文章
- 烂泥:ubuntu 14.04搭建Open***服务器
- Linux基础命令---文本格式转换expand、unexpand
- 在Sublime Text3中运行PHP代码
- 简易TCP客户端和服务端的实现
- dell主板40针开机针脚_电脑主板各种接口的介绍最新版
- Paxos一致性协议
- CYQ.Data 数据框架 发放V1.5版本源码
- Vs code 02 配置非标准的C、C++的编译环境
- EBB-4、忘记root密码;文件,目录权限
- 人人学IoT 助学思维导图
- CVPR学习(六):CVPR2019-目标跟踪
- 人工智能史(来自wiki)
- pytorch-sequencelabeling是一个支持softmax、crf、span等模型,注于序列标注(命名实体识别、词性标注、中文分词)的轻量级自然语言处理工具包,包含数据与实验
- CodeForces - 106C Buns (多重背包二进制优化)
- ssl申请证书的步骤是如何的呢?
- JDBC操作达梦数据库
- 大数据专业毕业后职业前景如何?
- 前端 - 如何引入阿里巴巴矢量图库?
- 九度oj 第1题 二维数组中的查找 何海涛:《剑指Offer:名企面试官精讲典型编程题》
- 测试手机双摄的软件,2018《中国拍照好手机》横评--双摄应用篇
热门文章
- PL/SQL数据库字符集问题
- 一个 提高SQL 查询的讨论帖
- Asp.net面试题之一
- luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra
- Vuejs报错error: Unexpected console statement (no-console) at src\... 解决办法
- python中并发编程基础1
- 使用Laya引擎开发微信小游戏(下)
- STL---string
- 第四周作业 wcPro
- InnoDB: Error: log file .\ib_logfile0 is of different size 0 10485760 bytes