jquery html动态添加的元素绑定事件详解


Posted in Javascript onMay 24, 2016

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:

<div id="testdiv">
  <ul></ul>
</div>

假设我们要给ul动态添加的<li>绑定click事件形成如下结果

<div id="testdiv">
  <ul>

   <li name="apple">apple</li>
   <li name="pear">pear</li>

  </ul>
</div>
<script>

function test(name){
  alert("I'm "+name);

}

//做法如下:

$("#testdiv ul").on("click","li", function() {
  //test($(this).attr("name"));
  //do something here
});

//主动触发某个<li>的click事件

// $("#testdiv ul li[name='apple']").trigger("click");

</script>

以上这篇jquery html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JS中Location使用详解
May 12 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 #Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 #Javascript
jQuery unbind 删除绑定事件详解
May 24 #Javascript
深入理解jQuery之防止冒泡事件
May 24 #Javascript
30分钟快速掌握Bootstrap框架
May 24 #Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 #Javascript
深入理解jQuery中的事件冒泡
May 24 #Javascript
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python批量图片处理简单示例
2019/08/06 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
浅谈python 类方法/静态方法
2020/09/18 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
查摆剖析材料范文
2014/09/30 职场文书
大学四年个人总结
2015/03/03 职场文书
2015年消防工作总结
2015/04/24 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript