当前位置:首页 > 教程 > Web前端 > 解决使用jQuery采用append添加的元素事件无效的方法

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

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

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,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-html-live-on/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程