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. Nutch的发展历程(转)

    2002年8月由Doug Cutting发起,托管于Sourceforge,之后发布了0.4.0.5.0.6三个版本 2004年9月Oregon State University(俄勒冈州立大学)采用 ...

  2. 【微信小程序】微信小程序wx.previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  3. 带有key参数的函数filter,map,max,min

    内置函数———filter def is_not_empty(s): return s and len(s.strip()) > 0 filter(is_not_empty, ['test', ...

  4. ubuntu下创建.net core时出现 Failed to create prime the NuGet cache

    https://docs.microsoft.com/en-us/aspnet/core/getting-started 根据微软给出的文档运行第一个web程序出现错误 Failed to creat ...

  5. 弹出键盘windowsoftinputmode属性设置值

    windowSoftInputMode属性设置值 2012-08-30 16:49 1592人阅读 评论(0) 收藏 举报 androidattributes活动 (1).AndroidManifes ...

  6. redis安装和配置(一)

    Redis 的官方下载站是http://redis.io/download 怎么安装 Redis 数据库呢?下面将介绍Linux 版本的安装方法 步骤一: 下载Redis 下载安装包:wget htt ...

  7. SVN安装配置及安全注意事项

    两个脚本: svn遍历脚本.zip wooyun上也是已经有非常多的svn泄露网站信息的事件,有的甚至由此导致整个服务器沦陷: WooYun: [盛大180天渗透纪实]第四章.SVN猎手 (某站SVN ...

  8. NanoHttpd

    NanoHttpd是个很强大的开源库,仅仅用一个Java类,就实现了一个轻量级的 Web Server,可以非常方便地集成到Android应用中去,让你的App支持 HTTP GET, POST, P ...

  9. Atitit.antlr实现词法分析

    Atitit.antlr实现词法分析 1.1.  antlrworks-1.4.3.jar   wizard1 1.2. 词法的类型 id,int,float ,comment,str,char,wh ...

  10. ios的设计原则

    ios的设计原则 iOS设计的详细的主要宗旨例如以下: 1.易操作,所关心的主题清新 2.UI控件布局合理,图片质量清新 3.用户的使用习惯 4.字体的大小,主次分明 5.舒适的动画效果 在创建一个新 ...