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选择器之子元素过滤选择器
Sep 28 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery实现手风琴案例
May 04 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
python实现名片管理系统
2018/11/29 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python实现简单猜数字游戏
2021/02/03 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
劳动竞赛活动总结
2014/05/05 职场文书
亚运会口号
2014/06/20 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python