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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
Javascript的无new构建实例详解
May 15 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
php车辆违章查询数据示例
2016/10/14 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue中rem的配置的方法示例
2018/08/30 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python通过cython加密代码
2020/12/11 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
政治学求职信
2014/06/03 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
会计工作态度自我评价
2015/03/06 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL