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 相关文章推荐
Javascript MD4
Dec 20 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
单元选择合并变色示例代码
May 26 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
vue打包时去掉所有的console.log
Apr 10 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
php下拉选项的批量操作的实现代码
2013/10/14 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
浅析php原型模式
2014/11/25 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
react-navigation之动态修改title的内容
2018/09/26 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python切片操作实例分析
2018/03/16 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python操作yaml说明
2020/04/08 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
25道Java面试题集合
2013/05/21 面试题
电厂厂长岗位职责
2014/01/02 职场文书
《匆匆》教学反思
2014/02/22 职场文书
献爱心倡议书
2014/04/14 职场文书
党员演讲稿
2014/09/04 职场文书
旗帜观后感
2015/06/08 职场文书
文艺演出主持词
2015/07/01 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Nginx源码编译安装过程记录
2021/11/17 Servers
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python