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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
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
GD输出汉字的函数的分析
2006/10/09 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python扩展内置类型详解
2018/03/26 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
超市重阳节活动方案
2014/02/10 职场文书
2015年化验员工作总结
2015/04/10 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
python基础之//、/与%的区别详解
2022/06/10 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis