Jquery 动态添加元素并添加点击事件实现过程解析


Posted in jQuery onOctober 12, 2019

给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身;

1. 语法

$(selector).on(event,childSelector,data,function)
// event _ 需要添加的js事件
//childSelector _ 只能添加到指定的子元素上的事件处理程序
//data _ 调用函数时需要传递的参数
// function _ js函数发生时触发的事件

2. 实例

//html代码
<div id="div1" style="border:1px solid black;"></div> 
<script type="text/javascript">
  //在id为div_link的元素中动态追加a
  $("#div1").html('<a id="div_link">链接点击</a>');
  //触发通过js动态添加的超链接a
  $("#div1").on("click", "#div_link", function(){
   //点击id为div_link时调用的处理函数
  });
</script>

3. 相关概念:事件冒泡、事件捕获,默认为事件冒泡

事件冒泡:从子元素到祖先元素触发事件的执行; 子元素绑定了click事件,当点击子元素时,浏览器会向上查找绑有click事件的父、祖先元素,如有就执行;默认为事件冒泡;

事件捕获:从点击的元素到子元素执行触发的相同的事件;当某个元素中绑定了click事件时,点击此元素,浏览器会向下查找绑有click事件的子、后代元素,如有就执行点击事件;

代码:

//第一个参数:所绑定的事件;
 //第二个参数:触发事件后执行的方法;
 //第三个参数:决定是事件冒泡-false还是事件捕获-true;默认为false-事件冒泡;
 elem.addEventListener("click", function(){

     ......
   }, boolean);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
jQuery 筛选器简单操作示例
Oct 02 #jQuery
You might like
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php自定义分页类完整实例
2015/12/25 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
vue登录注册实例详解
2019/09/14 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python同时处理多个异常的方法
2020/07/28 Python
入党申请书自我鉴定
2013/10/12 职场文书
授权收款委托书
2014/09/23 职场文书
党员进社区活动总结
2015/05/07 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
这样写python注释让代码更加的优雅
2021/06/02 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技