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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 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中,文件上传
2006/12/06 PHP
php split汉字
2009/06/05 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python如何制作英文字典
2019/06/25 Python
python中append实例用法总结
2019/07/30 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python实现局域网内实时通信代码
2019/12/22 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
什么是会话Bean
2015/05/14 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
需求分析说明书
2014/05/09 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
2016年寒假生活小结
2015/10/10 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android