以一个小例子来简单说明下情况

1
2
3
4
5
6
7
8
 <script src="jquery-1.11.0.min.js"></script>
<input type="button" value="点击我" id="k" />
 
<script>
$('#k').click(function() {
    alert("kkkkk");
})
</script>

如果直接在页面上这么写,可以弹出"kkkkk"。然而当input元素是ajax动态加载进来并输出到页面的,这时弹出窗就失效了,相当于click事件没有被绑定到id为k的元素上。

这时script里可以这样写:

1
2
3
$(document).on('click','#k',function() {
    alert("kkkkk");
})

一般使用live()或者delegate()替换on()也能达到预期效果。但注意我举例的时候使用的是jquery-1.11.0版本,从 jquery1.9版本开始就去除掉live(),听说是性能问题。所以高版本的jquery可以用delegate()和on()。

jquery 绑定动态元素的更多相关文章

  1. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

  2. jQuery on()绑定动态元素出现的问题小结

    jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...

  3. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  4. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  5. jQuery on()方法绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  6. jQuery on()方法绑定动态元素的点击事件实例代码浅析

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  7. Jquery 在动态元素上绑定事件

    弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" valu ...

  8. jq的绑定动态元素

    在项目中经常会遇到需要在页面中插入动态元素的情况,比如页面中有一个按钮: <div id="btn">确定</div> 点击按钮时在body中插入一段div ...

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

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

随机推荐

  1. SoupUI接口测试学习分享

    一.SoapUI的使用 我们主要用SoapUI的REST 测试功能来测试我们协议接口.RESTful是一种服务端API的规范,每个资源对应唯一的URI,然后用HTTP的POST.GET.PUT.DEL ...

  2. Python 获取Facebook用户Friends的爱好类别中的Top10

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-12 @author: guaguastd @name: f ...

  3. Mysql 复制表结构 及其表的内容

    顺便转一下Mysql复制表结构.表数据的方法: 1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们 ...

  4. 仿QQ好友列表界面的实现

    TableView有2种style:UITableViewStylePlain 和 UITableViewStyleGrouped. 但是QQ好友列表的tableView给人的感觉似乎是2个style ...

  5. CDZSC_2015寒假新人(2)——数学 H

    H - H Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  6. mysql中查看字符集的cmd指令

    参看下面链接:http://blog.chinaunix.net/uid-20180960-id-1972668.html

  7. Citrix 服务器虚拟化之十二 Xenserver灾难恢复

    Citrix 服务器虚拟化之十二 Xenserver灾难恢复 (环境有限实验无法测试,配置步骤摘取自官方文档) XenServer 灾难恢复的工作原理在存储库(SR)上还原从主(生产)环境复制到备份环 ...

  8. MAC OS中使用ll,la命令

    在linux下习惯了使用ll.la等ls别名 用mac os发现没有这样的命令,很不方便. 其实只要在用户目录下建立一个脚本“.bash_profile”,并输入以下内容即可:alias ll='ls ...

  9. js去除左右空格

     replace方法去掉字符串的空格 //去左空格; s=s.replace(/(^\s*)/g, ""); //去右空格; s= s.replace(/(\s*$)/g, &qu ...

  10. wordpress教程之get_posts()

    get_posts 介绍 June 3rd 2012 评论(16) get_posts 函数,简单的来讲是 get_post 的复数新形势,但因为是文章多篇提取,所以使用方法上却略有不同,支持众多参数 ...