jQuery高级应用：优化Web应用程序的最后绝招(2)

Live/Die

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

$("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显示了这两种方法。

//firsttechniquetodealwith"hot"pageelements,addedduringthepage's
//lifetime
$("#mailtabletr#"+message.id).addClass("messageRow")
.dblclick(function(){
if($(this).hasClass("mail_unread"))
{
$(this).removeClass("mail_unread");
}

//secondtechniquetodealwith"hot"pageelements
$("#mailtabletr#"+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的下一个发布版之中。我们看看如何利用它改变代码。

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

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

记住：当将事件添加到动态页面元素时要使用live()方法。这让事件和页面元素一样具有动态性。