jQuery动态生成的元素如何绑定事件
这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用。当时我百思不得其解,各种找错都没找到错误的原因。后来才发现是动态生成节点的问题,还是自己没有经验啊。
下面来总结一下这个问题的始末,温故而知新。
先看下click绑定事件的效果。
<div><p>a</p><p>b</p><p>c</p></div>
创建一个按钮来生成新的节点p
<button>create</button>
绑定点击事件
<script>//添加点击事件$("p").click(function(){$(this).text('click');})//创建一个新节点$("button").click(function(){var p ="<p>new</p>";$("div").append(p);})</script>
点击第一p元素,事件生效,运行结果:
点击按钮,生成新的节点,并点击新的节点,运行结果:
结果证明,click并没有绑定到新的节点上。
如果需要给动态的元素绑定事件,需要使用到on()。
$("div").on("click","p",function(){$(this).text('click');})
on()方法,可以给未来的元素绑定事件
使用方法:
1、先选中动态生成元素的父元素
2、然后绑定事件
3、再选中子类
可以理解为给div下的p元素包括未来的p元素绑定click事件,这是比较通俗易懂的理解,详细内容可以看文档的具体说明
jQuery动态生成的元素如何绑定事件相关推荐
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() {alert(this.va ...
- 动态生成的dom为什么绑定事件会失效,以及如何解决
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- jQuery动态创建的元素无法删除?—— 事件委派找其静态父级
项目场景: 通过一个小案例学习事件委派时jQuery动态创建的元素无法移除. 问题描述 案例需要动态添加表格行,点击GET可以移除此课程.但是后来动态创建的tr无法移除. var newtr = $( ...
- php点击后增加html元素,如何动态生成html元素以及为元素追加属性的方法介绍(附代码)...
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家. 动态生成HTML元素的方法有三种: 第一种:doc ...
- 2)JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...
- jQuery动态生成select下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
- jquery追加html后删除,jquery动态增加删除元素节点
jquery动态增加删除元素节点 对于语言编程,不同的思路有着不同的解决办法,Jquery对于动态的ul-li节点的增加删除实力操作思路: 1.做一个按钮用于增加li节点,使用Jquery:appen ...
- jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态 ...
最新文章
- 计蒜客/51Nod题目
- python 小甲鱼 好不好_[Python]小甲鱼Python视频第025课(字典:当索引不好用时)课后题及参考解答...
- C语言中的结构体,联合,链表和枚举,位域(上)
- android -------- java虚拟机和Dalvik虚拟机
- python学习-条件语句
- css那些事儿4 背景图像
- java des加密类_java的DES加密解密辅助类
- 计算机会计简要回答会计电算化的作用,会计电算化在学校财务管理中的作用
- mysql主从复制故障处理_MySQL主从复制故障处理一例
- UVA 10340 - All in All
- 优化性能一点总结,供大家参考
- Linux系统管理——账号管理与权限及归属管理实例
- ENVI5.3.1高分2号影像预处理流程
- Jest 自动化测试框架 笔记
- elvui显示服务器,魔兽世界怀旧服ElvUI插件
- 9月7日冬瓜哥与你见面畅谈!
- linux编译内核卡住,kernel启动卡住
- 程序员如何使正确卖出自己的程序但是不想被人知道代码的具体实现?
- 双十一假如有人把支付宝存储服务器炸了...
- jQuery.bind() 函数详解