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 格式字符串的应用
Mar 29 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
javascript实现简单打字游戏
Oct 29 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
Protoss热键控制
2020/03/14 星际争霸
PHP关联链接常用代码
2012/11/05 PHP
php两种无限分类方法实例
2015/04/21 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
取得传值的函数
2006/10/27 Javascript
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
浅析return false的正确使用
2013/11/04 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
劳动争议和解协议书范本
2014/11/20 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python