解决使用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事件依然可用。而无需重新给这种新增加的元素绑定事件。比如下面的代码。

<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的使用方法

<script>
$(document).on("click", ".waiting-save", function () {$(this).html('@T("Saving...")')$(this).attr("disabled", "");SaveAction(this);});
</script>

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

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

转载于:https://www.cnblogs.com/gary-tao/p/4293337.html

jquery动态加载问题相关推荐

jquery 动态加载插件
jquery 动态加载插件插件自己编写的请注意使用权限 //The MIT License (MIT)//Copyright (c) 2017 Jonny Su//Permission is her ...
【Jquery】Jquery动态加载css文件
前言很多时候我们需要在页面中引用外部的css文件,下面将介绍一下如何通过Jquery动态加载css文件方式一(Jquery) var cssFileUrl='../css/home.css'; i ...
(一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
jQuery动态加载select下拉列表
需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码 ...
jquery 动态加载js插件
作用描述: 在H5页面直接加载插件,有时可能在js使用到时没有记载完成,如果不进行二次加载及判断,程序可能就此卡壳,无法继续运行.通过jquery动态多次判断加载,保证插件的完整加载及使用. 解决方案 ...
jQuery动态加载瀑布流
jquery实现瀑布流案例分析首先,它的每个图片是等宽的其次,除第一排正常显示其余的图片都会显示在上一排中高度最小的那个图片的下面最后,就是根据最矮图片所在位置的宽高来,决定绝对定位设置图片显 ...
关于JQUERY动态加载页面时的JS失效的问题
加载页面后一些JS特效或CSS特效不起作用,简单的方法是重新加载一下JQUERY的特效函数.
jquery动态加载图片数据
这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击 ...
jquery动态加载JS【方法getScript】的改进
http://www.cnblogs.com/cuitsl/archive/2012/11/15/2771549.html 转载于:https://www.cnblogs.com/wln3344/p/ ...

jquery动态加载问题

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

live方法

on 方法

jquery动态加载问题相关推荐

最新文章

热门文章