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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
JS如何在数组指定位置插入元素
Mar 10 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP7新增函数
2021/03/09 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python使用turtle库绘制树
2018/06/25 Python
Python的argparse库使用详解
2018/10/09 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
学生夜不归宿检讨书
2014/09/23 职场文书
实习生辞职信范文
2015/03/02 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
西柏坡观后感
2015/06/08 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Python正则表达式中flags参数的实例详解
2022/04/01 Python