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简单性能问题及学习笔记
Feb 04 Javascript
jquery滚动特效集锦
Jun 03 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
javascript中this用法实例详解
Apr 06 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
JS实现li标签的删除
Apr 12 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 验证图片生成函数
2009/05/21 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php输入数据统一类实例
2015/02/23 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
js实现打字小游戏
2019/12/17 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
全陪导游欢迎词
2014/01/17 职场文书
《称象》教学反思
2014/04/25 职场文书
亲子活动总结
2014/04/26 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
无房证明范本
2014/09/17 职场文书
中学社团活动总结
2015/05/07 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript