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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
围观tangram js库
Dec 28 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
JavaScript实现滚动加载更多
Dec 27 Javascript
js实现碰撞检测
Jan 29 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
资料注册后发信小技巧
2006/10/09 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
Angular resolve基础用法详解
2018/10/03 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python使用列表的最佳方案
2020/08/12 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
程序员岗位职责
2013/11/11 职场文书
办理信用卡工作证明
2014/01/11 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
合作意向书
2014/07/30 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
领导欢迎词范文
2015/01/26 职场文书
2015年财政所工作总结
2015/04/25 职场文书