on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。

1
2
3
<div id="test">
<div class="evt">evt1</div>
</div>

错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的div则没有绑定

1
2
3
4
5
<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

正确的用法如下:

1
2
3
4
<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

checkbox单选设置  如果 <input name="ck" type="checkbox">是动态添加的则可以这样

$("#grid").on("click","input[name=ck]",function(){

$("input[name=ck]").not(this).prop("checked",false);

});

注:$(selector).on(event,childSelector,data,function,map)

jquery的on()绑定无效的方式的更多相关文章

  1. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  2. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

  3. jQuery on()方法绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  4. jQuery 新添加元素事件绑定无效

    jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...

  5. 解密jQuery事件核心 - 绑定设计(一)

    说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...

  6. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  7. 通过XMLHttpRequest和jQuery实现ajax的几种方式

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...

  8. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  9. jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

随机推荐

  1. jvm基础(2)

    7.类装载器 (1)class装载验证流程: A加载.这是装载类的第一个阶段,执行的动作包括:取得类的二进制流,转为方法区数据结构,在java堆中生成对应的java.lang.Class对象. B链接 ...

  2. Django-wsgi实例

    wsgiref实现了wsgi,他会将复杂的http请求经过处理,得到Django需要的格式,可以说他是一个接口,一端传入数据,一端处理数据 传统的socket实现 import socket def ...

  3. ruby on rails模拟HTTP请求错误发生:end of file reached

    在文章 Ruby On Rails中REST API使用演示样例--基于云平台+云服务打造自己的在线翻译工具 中,利用ruby的Net::HTTP发起http请求訪问IBM Bluemix上的sour ...

  4. CIDR(无类域间路由)(转载)

    来源:百度百科 CIDR(无类型域间选路,Classless Inter-Domain Routing)是一个在Internet上创建附加地址的方法,这些地址提供给服务提供商(ISP),再由ISP分配 ...

  5. EasyDarwin开源流媒体服务器实现RTSP直播同步输出MP4、RTMP、HLS的方案思路

    背景 近期跟开源团队商量,想在EasyDarwin上继续做一些功能扩展,目前EasyDarwin开源流媒体服务器只能够实现高效的RTSP推流直播转发/分发功能,输入与输出都是RTSP/RTP流,不能够 ...

  6. cocos2d-js v3事件管理器

    总概: 1.时间监听器(cc.EventListener)封装用户的事件处理逻辑. 2.事件管理器(cc.eventManager)管理用户注册的事件监听器. 3.事件对象(cc.Event)包含事件 ...

  7. 使用官方Android-support-v7在低版本上使用ActionBarActivity

    昨天晚上更新了下Android SDK Manager,发现Extras下的Android Support Library已经更新到19.1了,上网一查原来是sdk\extras\android\su ...

  8. php-get和post请求

    1.get请求 <?php //判断20130101是否是工作日 //工作日对应结果为 0, 休息日对应结果为 1, 节假日对应的结果为 2: $url='http://www.easybots ...

  9. html5--5-6 绘制圆/弧

    html5--5-6 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...

  10. 使用grunt中遇到的问题

    1.使用jshint进行代码检查时,grunt命令后报错: 因为出现了乱码,我猜测是因为编码原因导致的.遂在webstorm的setting中修改了编码为utf-8,问题解决.