高级 jQuery-2

look_w

Live/DiejQuery 1.3 版本的另外两个强大的新特性是 live() 和 die() 函数。通过一个示例可以看到它对构建设计良好的 Web 应用程序的作用。想像一下对表中的每个单元格都添加一个双击。作为 jQuery 老手，您应该知道要在 document.ready() 函数中设置双击，如清单 4 所示。
清单 4. 设置双击

1 2 3 4 5 6

$("tr.messageRow").dblclick(function() {    if ($(this).hasClass("mail_unread"))    {       $(this).removeClass("mail_unread");    }    });

这个设计存在一个问题。它向包含一个 messageRow 类的表的每行添加一个双击事件。但是，如果向该表添加新的行，会发生什么事情呢？例如，当您使用 Ajax 在未重新加载页面的情况下将额外的消息加载到页面时，可能会显示这些行。这导致一个问题，因为所编写的代码不能工作。您创建的事件被绑定到所有在加载页面时显示的 tr.messageRow 元素中。它没有绑定到您在页面的生命周期中创建的任何新的 tr.messageRow 中。编写类似代码的程序员最终会很失望的，因为它无法工作。在 jQuery 文档发现该问题之前，jQuery 新手可能要花好几个小时才能弄明白为什么他们的代码不能工作（这也是我去年的经历）。
在 jQuery 1.3 之前，有 3 种可以解决该问题的方法，但都不是很好（对于使用 jQuery 1.2.x 的程序员而言，它们仍然有效）。第一种方法是重新初始化技术，它在每次添加新的元素之后重新将事件添加到选中的元素中。第二种方法利用了 bind/unbind，如前面小节所示。清单 5 显示了这两种方法。
清单 5. 向新元素添加事件的替代办法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// first technique to deal with "hot" page elements, added during the page's // lifetime $("#mailtable tr #"+message.id).addClass("messageRow")    .dblclick(function() {    if ($(this).hasClass("mail_unread"))    {       $(this).removeClass("mail_unread");    } // second technique to deal with "hot" page elements $("#mailtable tr #"+message.id).addClass("messageRow")    .bind("dblclick", (function() {    if ($(this).hasClass("mail_unread"))    {       $(this).removeClass("mail_unread");       }

这两种方法都不是很好。您可能正在重复编写代码，或者被迫查找可能添加新页面元素的点，然后在这些点上处理 “热元素” 问题。这不是良好的编程方式。但是，jQuery 可能大大简化这一切，它能够帮助我们完成很多事情。
幸运的是，有一个插件好像能够解决该问题。这个插件称为 LiveQuery 插件，它允许您将特定页面元素绑定到事件，但仅能以 “活动” 的方式进行，因此所有页面元素（包括创建页面时自带的元素和在页面的生命周期中创建的元素）都可能触发事件。对 UI 开发人员而言，这是一个非常智能、重要的插件，因为使得处理动态页面就像处理静态页面一样简单。对于 Web 应用程序开发人员而言，它就是真正不可或缺的插件。
jQuery 核心团队意识到该插件的重要性，从而将其包含到 1.3 发布版中。这个 “活动” 特性现在是核心 jQuery 的一部分，因此任何开发人员都可以利用它。这个特性完整地包含在 1.3 核心代码中，除了一小部分事件之外。我敢打赌，这些未被包含的事件将出现在 jQuery 的下一个发布版之中。我们看看如何利用它改变代码。
清单 6. “活动” 事件模型

1 2 3 4 5

$("tr.messageRow").live("dblclick", function() {    if ($(this).hasClass("mail_unread"))    {       $(this).removeClass("mail_unread");       }

通过对代码进行一处小更改，该页面上的所有 tr.messageRow 元素被双击时都将触发这段代码。仅使用 dblclick() 函数是看不到这种行为的，如上所述。为此，我极力推荐您在大部分事件方法中使用 live() 方法。事实上，我认为它对于任何动态地创建页面元素的页面都是必不可少的，不管是通过 Ajax 还是用户交互进行创建，都需要使用 live() 函数而不是事件方法。它很好的实现了易编写和 bug 之间的折衷。
记住：当将事件添加到动态页面元素时要使用 live() 方法。这让事件和页面元素一样具有动态性。