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设置css属性的代码
Dec 28 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 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
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python读写文件write和flush的实现方式
2020/02/21 Python
深入分析python 排序
2020/08/24 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
python中re模块知识点总结
2021/01/17 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
学生生病请假条范文
2014/02/16 职场文书
城管综合整治方案
2014/05/01 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技