【前言】
之前讲课的时候讲过jquery的live()方法,当时讲解的时候说的是→当前或者未来的元素,但是后来发现jQuery的live方法无效???
尝试着把jQuery代码库版本换到1.8及1.8之前才有效果,所以这里总结下
【主体】
(1)用live方法时,注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。
在jQuery官方网站上说明了原因,并声称用on方法取代live方法。 jQuery官方网站声称下面三行代码是等价的 $("a.offsite").live("click", function(){...}); // jQuery 1.3+ $(document).delegate("a.offsite", "click", function(){...}); // jQuery 1.4.3+ $(document).on("click", "a.offsite", function(){...}); // jQuery 1.7+
(2)原因解析:
在新版的jquery(>1.9版本即为新版)中,live()方法已经被删除了,所以我们在调用的时候会提示该函数不存在,js报错。 用live的时候要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。
(3)原来的写法是on绑定元素点击事件:
如果直接替换为on()方法,那么新生成的元素再次点击事件的时候不会有任何效果,新的语法是:
$(document).on("click","table a",function(){...}) 或者(注意:该版本必须大于1.7) $(body).on("click","table a",function(){...}) 或者 $("table).on("click","a",function(){...})
这里涉及到一个问题,$("body")这里为什么是body,其实我们可以选择其他的距离#company_logo更近的节点,这样会有更好的性能,其实on()是在body中找#company_logo节点,所以我们吧body换成#company_logo的上级节点会取得更好的性能。
具体可以参考文章浅谈jQuery出现的新添加元素点击事件无效
.
相关推荐
为了解决这个问题,jQuery提供了`live`方法,它允许我们为当前及未来存在的元素绑定事件。`live`方法的核心在于事件委托,即将事件绑定到共享的祖先元素,通常是`document`或更具体的静态父元素,然后利用事件冒泡...
`on`方法自jQuery 1.7版本起成为绑定事件处理程序的主要方式,它取代了`bind`、`live`和`delegate`等方法。`on`的一个关键特性是它能够处理当前存在以及未来可能被添加到DOM中的元素的事件。 基本的`on`方法语法...
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...
需要注意的是,`live()`方法在jQuery 1.7版本之后已经被废弃,因为它性能较低且存在一些问题。现在推荐使用`on()`来实现事件委托,因为`on()`方法更强大、更灵活,并且性能更好。 总结一下,解决jQuery中动态元素...
6. **链式操作(Chaining)**:jQuery的返回对象通常是jQuery实例,这意味着可以连续调用多个方法,如`$("#element").css("color", "red").slideUp();`。 7. **插件(Plugins)**:jQuery的生态系统中包含了大量...
标题提到的`bind`和`live`都是jQuery中用于事件绑定的方法,它们虽然在功能上有相似之处,但在使用场景和性能上有所不同。以下是对这两个方法的详细解释和比较: 1. `bind()`方法: `bind()`是jQuery中最基础的...
在jQuery中,有几种方法可以解决这个问题,主要涉及`live`、`delegate`和`on`这三个函数。 1. **`live`方法**: 在旧版本的jQuery中,`live`方法是解决动态添加元素事件绑定的理想选择,因为它能够监听到当前及...
值得注意的是,自jQuery 1.7版本开始,`.on()`方法替代了`.live()`, `.delegate()`, 和 `.bind()`,成为推荐的事件绑定方式。因此,如果你正在使用较新的jQuery版本,可以使用`.on()`来实现相同的功能: ```...
1. **监听输入事件**:使用JavaScript的`addEventListener`方法绑定到输入框的`input`或`keyup`事件,以便在用户键入每个字符时触发处理函数。 2. **查询处理**:每当接收到新的输入,就执行查询逻辑。这可能包括...