jQuery动态生成的元素绑定事件操作实例分析


Posted in jQuery onMay 04, 2019

本文实例讲述了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元素,事件生效,运行结果:

jQuery动态生成的元素绑定事件操作实例分析

点击按钮,生成新的节点,并点击新的节点,运行结果:

jQuery动态生成的元素绑定事件操作实例分析

结果证明,click并没有绑定到新的节点上。

如果需要给动态的元素绑定事件,需要使用到on()。

$("div").on("click","p",function(){
    $(this).text('click');
})

on()方法,可以给未来的元素绑定事件

使用方法:

1、先选中动态生成元素的父元素
2、然后绑定事件
3、再选中子类

可以理解为给div下的p元素包括未来的p元素绑定click事件,这是比较通俗易懂的理解,详细内容可以看文档的具体说明

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
详解jquery和vue对比
Apr 16 #jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解JQuery基础动画操作
Apr 12 #jQuery
You might like
redis 队列操作的例子(php)
2012/04/12 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php实现多城市切换特效
2015/08/09 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
可输入的下拉框
2006/06/19 Javascript
js验证表单大全
2006/11/25 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python中文件的读取和写入操作
2018/04/27 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
超简单使用Python换脸实例
2019/03/27 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
商务考察邀请函模板
2015/02/02 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
检举信的写法
2019/04/10 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
Hive日期格式转换方法总结
2022/06/25 数据库