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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现放大镜案例
Oct 19 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
js 对象是否存在判断
2009/07/15 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
javascript制作2048游戏
2015/03/30 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python爬取成语接龙类网站
2018/10/19 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python zip()函数使用方法解析
2019/10/31 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
高中军训感想300字
2014/03/04 职场文书
产品质量保证书
2014/04/29 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
教师节感谢信
2015/01/22 职场文书