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实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
原生js实现放大镜效果
Jan 11 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
node之本地服务器图片上传的方法示例
Mar 26 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
限制复选框的最大可选数
2006/07/01 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue更改数组中的值实例代码详解
2020/02/07 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python函数学习笔记
2008/10/07 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
django中的setting最佳配置小结
2017/11/21 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
个人思想理论学习的自我鉴定
2013/11/30 职场文书
物业管理专业自荐信
2014/07/01 职场文书
博士导师推荐信
2015/03/25 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
基于PyQt5制作一个群发邮件工具
2022/04/08 Python