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 相关文章推荐
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 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判断变量的函数
2012/04/24 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
js实现日期级联效果
2014/01/23 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python入门篇之对象类型
2014/10/17 Python
Python深入06——python的内存管理详解
2016/12/07 Python
django中的setting最佳配置小结
2017/11/21 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
期终自我鉴定
2014/02/17 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis