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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery中库的引用方法
Jan 06 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery编写QQ简易聊天框
Aug 27 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
967 个函式
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
php fread函数使用方法总结
2019/05/28 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Ubuntu下安装PyV8
2016/03/13 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python面向对象 反射原理解析
2019/08/12 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
人力资源经理自我评价
2014/01/04 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
详解python的异常捕获
2022/03/03 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技