对于append的元素，原有的方法不生效

解决：用on方法

找到的：http://www.zhidao91.com/jquery-html-live-on/

解决使用jQuery采用append添加的元素事件无效的方法

2014年09月22日　｜　jQuery　｜　浏览： 1,118

当我们使用jQuery动态加载html元素，但是元素上面又绑定了Click等事件，针对新添加的元素这些事件是无效的，那么应该怎样解决呢？

live方法

live( type, fn )
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是，live()一次只能绑定一个事件。

这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。比如下面的代码。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").live("click",function(){

    $("p").slideToggle();

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<button>请点击这里</button>

</body>

</html>

on 方法

但是随着jQuery的版本升级，自从jQuery 1.9及其以上已经无法使用live了，那么没有办法了吗，不是的，对于jQuery1.9版本及其以上可以使用on，其效果等同于live。下面的on的使用方法

1

2

3

4

5

6

7

<script>

$(document).on("click", ".waiting-save", function () {

 $(this).html('@T("Saving...")')

     $(this).attr("disabled", "");

     SaveAction(this);

   });

</script>

原创文章，转载请注明： 转载自知道91

本文链接地址: 解决使用jQuery采用append添加的元素事件无效的方法

jquery动态加载问题的更多相关文章

  1. jquery动态加载 去除js

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  2. JQuery 动态加载iframe.

    html: <iframe id="ifm" style="width:inherit;height:inherit" runat="serve ...

  3. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  4. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

  5. jquery动态加载脚本

    如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...

  6. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  7. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  8. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

  9. jQuery动态加载JS以减少服务器压力

    如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页.因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加 ...

随机推荐

  1. 菜鸟学Linux命令:find命令 查找文件

    find命令是Linux下最常用的命令之一,灵活的使用find命令,你会发现查找文件变得十分简单. 命令格式 find [指定查找目录]  [查找规则(选项)]  [查找完后执行的动作] 参数规则 - ...

  2. poj 2186 有向图强连通分量

    奶牛互相之间有爱慕关系,找到被其它奶牛都喜欢的奶牛的数目 用tarjan缩点,然后判断有向图中出度为0的联通分量的个数,如果为1就输出联通分量中的点的数目,否则输出0. 算法源自kb模板 #inclu ...

  3. java环境变量配置(转)

    java环境变量配置 windows xp下配置JDK环境变量: 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08: 2.安装完成后,右 ...

  4. Listview点击事件

    listview = (ListView) findViewById(R.id.listview); // 填充data数据 data = new ArrayList<String>(); ...

  5. Fragment基础讲解

    //新建一个碎片public class LeftFragment extends Fragment { @Override public View onCreateView(LayoutInflat ...

  6. POJ1699 Best Sequence（AC自动机+状压DP）

    题目,求包含所有的给定的n个DNA片段的序列的最短长度. AC自动机上的DP题. dp[S][u]表示已经包含的DNA片段集合为S,且当前后缀状态是自动机第u个结点的最短长度 dp[0][0]=0 我 ...

  7. LightOJ1031 Easy Game（区间DP）

    我可能真想不到这题是区间DP,不过知道是区间DP想了下就AC了. dp[i][j]表示局面为ai...aj先手能获得与后手得分的最大差值 那么转移到当前状态就是枚举中间的位置,分成两边,其中一边先手全 ...

  8. 十位一线专家分享Spark现状与未来----峰会摘录

    CSDN大数据技术: 十位一线专家分享Spark现状与未来(一) 十位一线专家分享Spark现状与未来(二) 十位一线专家分享Spark现状与未来(三) 部分摘录: 加州大学伯克利分校AMP实验室博士 ...

  9. HDU 2255 & KM模板

    题意: 一张完备二分图求最优完备匹配. SOL: 这题就不讲什么sol了...毕竟是裸的KM,不会的话可以看老人家的大白鼠,一些问题看代码注释.讲讲经历(悲惨的经历) 刚打完,自信地交上去发现MLE. ...

  10. HDU 3853(期望DP)

    题意: 在一个r*c的网格中行走,在每个点分别有概率向右.向下或停止不动.每一步需要的时间为2,问从左上角走到右下角的期望时间. SOL: 非常水一个DP...(先贴个代码挖个坑 code: /*== ...