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计数器代码
Nov 04 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
一些常用的php简单命令代码集锦
2007/09/24 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php中strtotime函数性能分析
2016/11/20 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python实现的双色球生成功能示例
2017/12/18 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
行政人事专员岗位职责
2014/03/05 职场文书
初三化学教学反思
2016/02/22 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python