jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的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动态添加的元素绑定事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
关于jQuery新的事件绑定机制on()的使用技巧
今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔
-
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
复制代码 代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem
-
jQuery事件的绑定、触发、及监听方法简单说明
如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等.但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题. 下面简单的来说一下 jQuery 中事件的基础操作. 绑定事件和事件代理 在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件.语法: .on( events [, selector ] [, data ], handler ) event
-
jQuery给动态添加的元素绑定事件的方法
本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l
-
jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() { alert("点击后触发"); }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on()
-
jquery下onpropertychange事件的绑定方法
今天做一张表单,要求行输入的时候,自动计算值,并且计算值的这一列,要自动合计. 开始用了onchange事件,但是在输入的时候,用Javascript计算出并填值的那一列并不会响应onchange 事件. Google了一下,找到 onpropertychange这个事件,用JS设置值也可以响应. 在Jquery里用的时候,必须要用bind. 复制代码 代码如下: $("#textboxID").bind("propertychange", function() {
-
jQuery实现html双向绑定功能示例
本文实例讲述了jQuery实现html双向绑定功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9.1.js"></script
-
jquery移除、绑定、触发元素事件使用示例详解
复制代码 代码如下: unbind(type [,data]) //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码
-
jQuery事件绑定.on()简要概述及应用
前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: 复制代码 代码如下: .on( events [, selector ] [, data
-
jquery单选框radio绑定click事件实现方法
本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="
-
JQuery中绑定事件(bind())和移除事件(unbind())
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test
随机推荐
- JavaBean(EJB) 3.0 全新体验
- java编程经典案例之基于斐波那契数列解决兔子问题实例
- Oracle常见错误代码的分析与解决
- Python实现把数字转换成中文
- aspx中页面按钮写返回上一页代码
- Javascript 正则表达式实现为数字添加千位分隔符
- Android OKHTTP的单例和再封装的实例
- Highcharts+NodeJS搭建数据可视化平台示例
- js原生Ajax的封装和原理详解
- javascript中定义类的方法详解
- js、jquery图片动画、动态切换示例代码
- SQL SERVER中强制类型转换cast和convert的区别详解
- JQuery扩展插件Validate 5添加自定义验证方法
- jquery 简单应用示例总结
- JavaScript学习笔记之数组的增、删、改、查
- javascript计算渐变颜色的实例
- js escape,unescape解决中文乱码问题的方法
- 动网dvbbs7.1论坛权限提升漏洞及防范(图)
- 如果SQL2000装在用户数据所在的盘,请检查SQL运行用户的磁盘配额是否足够
- Android版本更新实例详解