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()的更多相关文章

  1. JQuery未来元素事件监听写法

    $(document).on('click','.div1',function(){ alert("abc"); }); 格式一致,第一个参数写事件,第二个参数给谁写事件(选择器) ...

  2. Jquery 页面元素事件绑定

    场景: 用一个Table来展示数据信息列表,通过鼠标点击Table中的Tr来获取到当前选中的数据行信息. <table class="Table" width="1 ...

  3. 利用Xpath和jQuery进行元素定位示例

    利用Selenium在做前端UI自动化的时候,在元素定位方面主要使用了XPATH和jQuery两种方法.XPATH作为主要定位手段,jQuery作为补充定位手段.因为在通过XPATH进行定位的时候,S ...

  4. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

  5. jquery添加未来元素时，其绑定事件不起作用解决办法

    delegate说起对未来元素是其作用的,于是写下代码: <!DOCTYPE HTML> <html> <head> <meta charset=" ...

  6. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  7. jQuery 中 on 方法-----给未来元素添加事件

    <li class='clear dir-li'> <div class='left title'> 添加到目录:</div> <div class='lef ...

  8. jQuery中是事件绑定方式--on、bind、live、delegate

    概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...

  9. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

随机推荐

  1. PDFCrop裁剪PDF文档使用方法

    使用VISIO画图,然后生成PDF文档插入到LaTeX文档中,会出现黑边框的问题.通过对PDF文件进行裁剪可以去掉黑边框,之前我是通过Acrobat进行裁剪,后来激活失效了..只好找其他方法.今天发现 ...

  2. [flask_sqlalchemy ]插入数据时发生错误后如何处理

    示例代码: def add_supplier(): form = request.form if request.method == 'POST': print(form) supplier = Su ...

  3. 【Ruby on Rails 学习三】Ruby 基本数据类型（类、类的实例、对象）

    数字.文本.范围.符合.True.False.Nil 1为什么是一个类的对象,使用methods方法可以查看一个对象的所有函数(方法) $ irb irb(main)::> => irb( ...

  4. Nginx配置反向代理与负载均衡

    Nginx的upstream目前支持的分配算法: 1.round-robin 轮询1:1轮流处理请求(默认) 每个请求按时间顺序逐一分配到不同的应用服务器,如果应用服务器down掉,自动剔除,剩下的继 ...

  5. Mysql 字段类型与查询类型不一致导致索引使用失败

    今天优化数据库的慢查询,有一条Sql让我百思不得其jie,就是他了. SELECT * FROM test WHERE user_id=1; 用explain 去分析一下 索引都有了,为什么还要扫描全 ...

  6. java中变量的线程安全性

    静态变量:线程非安全.静态变量即类变量,位于方法区,为所有对象共享,共享一份内存,一旦静态变量被修改,其他对象均对修改可见,故线程非安全.实例变量:单例模式(只有一个对象实例存在)线程非安全,非单例线 ...

  7. JavaScript中：地址引用的特性，导致静态初始值被修改

    问题分类 JavaScript,值引用,地址引用 问题描述 开发过程中,服务端将静态配置数据从mysql数据库中读取到内存中,方便调用. 在实现流派功能时,需从数据库中读取流派种类数据到内存中,由于其 ...

  8. Websocket --（1）简介

    最近项目需求提出前台界面实时获取后端数据,也就是数据发生变化后服务端主动通知前端页面,以往都是前端请求服务端.当然了,前人已经为我们想好了解决办法,那就是websocket.至于websocket的介 ...

  9. node项目自动化部署--基于Jenkins,Docker,Github(2)配置节点

    上一篇文章中准备工作已经完成的差不多了 这一篇主要讲解 Jenkins 上面的相关配置 为了让代码部署到所有的子节点上 所以我们首先需要在 Jenkins 中添加我们希望代码部署到的节点 配置节点 首 ...

  10. 【挣扎失败】2019CSP-S 游记

    妈耶…… 今年是作为高中生参赛的第一年……然而…… 心痛 洛谷评分,一橙一蓝两紫两黑 我个菜鸡瑟瑟发抖 在考完后三天的信息课码的,刚写没几个字就要下课了 抽空把这个写完