jquery 未来元素事件示例 on() delegate() live()
jquery 1.7版后建议使用on()
$(document).on("click","#green",function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
$(document).delegate("#green", "click", function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
$("#green").live("click", function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
下面是示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 未来元素事件示例 on() delegate() live()</title>
<style>
#green{ border:3px solid #ddd; width:200px; height:100px}
.green{ border:3px solid #900; width:200px; height:100px}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#button").one("click", function(){
$(this).after('<p id="green">我是点击按钮新增的元素,点击我也可以增加一个段落</p>');
});
$(document).on("click","#green",function(){
var $this = $(this);
if (!$this.data('isClick')){//判断是否点击过一次,限制只执行一次以下代码,与one功能类似
$this.data('isClick', 1);
$(this).after('<p class="green">我是点击未来元素新增的段落</p>');
} });
});
</script>
</head> <body>
<input name="button" id="button" type="button" value="增加一个段落" />
</body>
</html>
jquery 未来元素事件示例 on() delegate() live()的更多相关文章
- JQuery未来元素事件监听写法
$(document).on('click','.div1',function(){ alert("abc"); }); 格式一致,第一个参数写事件,第二个参数给谁写事件(选择器) ...
- Jquery 页面元素事件绑定
场景: 用一个Table来展示数据信息列表,通过鼠标点击Table中的Tr来获取到当前选中的数据行信息. <table class="Table" width="1 ...
- 利用Xpath和jQuery进行元素定位示例
利用Selenium在做前端UI自动化的时候,在元素定位方面主要使用了XPATH和jQuery两种方法.XPATH作为主要定位手段,jQuery作为补充定位手段.因为在通过XPATH进行定位的时候,S ...
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
- jquery添加未来元素时,其绑定事件不起作用解决办法
delegate说起对未来元素是其作用的,于是写下代码: <!DOCTYPE HTML> <html> <head> <meta charset=" ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- jQuery 中 on 方法-----给未来元素添加事件
<li class='clear dir-li'> <div class='left title'> 添加到目录:</div> <div class='lef ...
- jQuery中是事件绑定方式--on、bind、live、delegate
概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...
- jQuery新的事件绑定机制on()示例应用
投稿:whsnow 字体:[增加 减小] 类型:转载 从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下 ...
随机推荐
- 浏览器端-W3School-HTML:HTML DOM Object 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Object 对象 1.返回顶部 1. HTML DOM Object 对象 Object 对象 Object 对象代表 HTM ...
- django 生成后台管理
在应用下的admin.py中注册模型类.告诉djang框架根据注册的模型类来生成对应表管理页面. 1) 注册管理数据表 from django.contrib import admin from us ...
- 用poi来导出数据到excel文档
package cn.com.dyg.work.common.utils; import org.apache.poi.hssf.usermodel.HSSFRichTextString; impor ...
- MYSQL5.5 linux安装
1.常规的编译安装MYSQL 此种方法使用所有Mysql5.0 - 5.1 系列产品 比较常规的编译方式 2. 采用cmake 方式编译安装Mysql 3.二进制安装方式 免编译安装MYSQL 4.如 ...
- #Java学习之路——基础阶段二(第十一篇)
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- 【神经网络与深度学习】【python开发】caffe-windows使能python接口使用draw_net.py绘制网络结构图过程
[神经网络与深度学习][python开发]caffe-windows使能python接口使用draw_net.py绘制网络结构图过程 标签:[神经网络与深度学习] [python开发] 主要是想用py ...
- 深入理解java:2.4. 线程本地变量 java.lang.ThreadLocal类
ThreadLocal,很多人都叫它做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多. 可能很多朋友都知道ThreadLocal为变量在每个线程中都创建了一个副本,那样每个线程可以访问自己内 ...
- k8s-kubernetes-configmap存储
存储 configMap configMap描述信息 ConfigMap功能在Kubernetes1.2版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息. ConfigMap ...
- Splunk初识
目录 网址汇总 注册与下载 安装 使用 中文环境 关于APP Splunk自带的APP 创建自己的APP 添加数据 本地文件添加 通过监视添加数据 自定义列 查询语句 SPL 与 SQL对照 命令查找 ...
- CentOS7设置集群环境SSH免密访问
1.准备工作 1)通过克隆或者其他方式获得可互相通信的多台节点(本文为3台虚拟机:hadoop101.hadoop102.hadoop103) 2)配置节点的静态IP.hostname.hosts,参 ...