jquery的on()绑定无效的方式
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()绑定无效的方式的更多相关文章
- 关于Jquery的delegate绑定事件无效
今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...
- jQuery绑定事件-多种方式实现
jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery 新添加元素事件绑定无效
jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...
- 解密jQuery事件核心 - 绑定设计(一)
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- 通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...
- jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案
jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...
随机推荐
- Vue 资源
一. 资源教程 综合类 vuejs 英文资料 Vue中文资料总汇 Vue.js 的一些资源索引 vue资料 入门类 vue 快速入门 Vue.js 中文系列视频教程 on Laravist 英文教程 ...
- JSP 随记
jstl <c:forEach> 遍历,多个<option>时显示"全部".单个 option时,默认选中! 引入:<%@ taglib prefix ...
- 解压 boot.img
./split_bootimg.pl boot.img Page size: 2048 (0x00000800) Kernel size: 7062084 (0x006bc244) Ramdisk s ...
- 隐私问题成O2O绊脚石,加强行业监管迫在眉睫
这年头,O2O的发展越来越给力了.因为O2O能充分结合互联网经济的线上优势和传统经济的线下优势,因此,传统商户纷纷借助O2O来开展业务,取得了不俗的成绩.只是,在移动互联网越来越"开 ...
- 怎样得到QML package的具体API接口
虽然我们的developer站点有丰富的API介绍,可是,有些API的介绍可能并不全,有些API也在不断地演进中. 为了得到更具体的API,我们能够通过例如以下的命令来得到更加具体的信息.比方我们对& ...
- Vue使用axios
main.js------------------- import axios from "axios"; import qs from "qs"; imp ...
- Struts2基本概念
一.Struts2体系结构 : 1.Web浏览器请求一个资源. 2.过滤器Dispatcher查找方法,确定适当的Action. 3.拦截器自动对请求应用通用功能,如验证和文件上传操作. 4.Acti ...
- java基础知识查漏 四
1.JAVA多线程实现方式 (1)继承Thread类,并重写run()方法 (2)实现Runnable接口,,实现run()方法 (3)使用ExecutorService.Callable.Futur ...
- Oracle Meger into 函数
Oracle 在 9i 引入了 merge 命令, 通过这个 merge 能够在一个SQL 语句中对一个表同时执行 inserts 和 updates 操作.Merge into 可以实现用 B 表来 ...
- Spring注解原理的详细剖析与实现
本文主要分为三部分: 一. 注解的基本概念和原理及其简单实用 二. Spring中如何使用注解 三. 编码剖析spring@Resource的实现原理 一.注解的基本概念和原理及其简单实用 注解(An ...