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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
jQuery 插件开发指南
Nov 14 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
php文件包含的几种方式总结
2019/09/19 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python break语句详解
2014/03/11 Python
一个超级简单的python web程序
2014/09/11 Python
用Python实现协同过滤的教程
2015/04/08 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python opencv实现运动检测
2018/07/10 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python命令行click参数用法解析
2019/12/19 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python