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动画_动力节点节点Java学院整理
Jul 04 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery实现简单轮播图效果
Dec 27 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php 中英文语言转换类
2011/09/07 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php url路由入门实例
2014/04/23 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python实现复制整个目录的方法
2015/05/12 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python如何查看网页代码
2020/06/07 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
保密工作实施方案
2014/02/24 职场文书
岗位说明书范文
2014/05/07 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
2015年父亲节寄语
2015/03/23 职场文书