jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况

例如

1
2
3
<div id="testdiv">
  <ul></ul>
</div>

需要给<ul>里面动态添加的<li>标签添加click事件
 
jquery 1.7版以前使用live动态绑定事件

1
2
$("#testdiv ul li").live("click",function(){
});

jquery 1.7版以后使用on动态绑定事件

1
2
3
$("#testdiv ul").on("click","li", function() {
     //do something here
 });

jQuery中如何给动态添加的元素绑定事件的更多相关文章

  1. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  2. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  3. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  4. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  5. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  6. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  7. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  8. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  9. jQuery中给动态添加的元素绑定事件

    $(document).on(event,selector,function(){ //do somethimg here! });

随机推荐

  1. 云、Iaas、Paas、Saas

    云服务现在已经快成了一个家喻户晓的词了.如果你不知道PaaS, IaaS 和SaaS的区别,那么也没啥,因为很多人确实不知道. 云其实是互联网的一个隐喻,云计算其实就是使用互联网来接入存储或者运行在远 ...

  2. 整站下载工具Teleport Pro

    http://zmingcx.com/download-tools-teleport-pro-full-stop.html Teleport Pro是一款功能强大的离线浏览器,不论规模多大的网站,只要 ...

  3. 常用排序算法及Java实现

    概述 在计算器科学与数学中,一个排序算法(英语:Sorting algorithm)是一种能将一串数据依照特定排序方式进行排列的一种算法.本文将总结几类常用的排序算法,包括冒泡排序.选择排序.插入排序 ...

  4. java基础讲解06-----字符串

    1. package test; public class chb01 { public static void main(String[] ggs)        {            /**  ...

  5. CCNA2.0笔记_OSPF v3

    OSPF v3 是可以在ipv6上实现路由的一种路由协议 OSPF v2(for IPv4),OSPF v3(for IPv6)在一台路由器中互相独立运行 OSPF v3与v2有很多类似的功能: - ...

  6. jsp tag 直接文件实现

    引入 <%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %> 这里注意/WEB-INF/tags ...

  7. RxBinding -- 官网说明

    RxBinding -- 官网说明 新建 模板 小书匠 作用 组件 平台绑定 support-v4 绑定 appcompact-v7 绑定 design 库绑定 recyclerview-v7 绑定 ...

  8. List、Set、Map集合大杂烩

    java集合主要分三种:list.set.map:当中list和set都继承自Collection接口,两者最大差别是set不能包括反复元素 list的经常使用实现类有: ArrayList:大小可变 ...

  9. hive执行更新和删除操作

    Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置.要想支持行级insert.update.delete,需要配置Hive支持事务. 一.Hive具有ACID语义事务的 ...

  10. ECMall 中URL体系的改造思路

    EC系列的产品都已停止更新很久了,但其对中国中小电商企业的影响无疑是巨大的.很多公司,都是直接拿来即改,改了即用. 但他们都有个问题,代码是比较传统的开发模式过来的,尤其ecshop.ECMall系统 ...