AJAX和事件

假设我们想让字典词条名来控制后面解释的可见性，即单击词条名可以显示或隐藏相应的解释。使用到目前为止介绍的技术，实现这一点应该很简单，参见代码清单6-18.

//未完成的代码
$( document ). ready( function ( ) {
$( 'h3. term' ). click( function ( ) {
$( this ). siblings( '. definition' ). slideToggle( );       
)};
)};

当词条被单击时，该元素找到类名中包含definition的相邻节点，并根据情况滑入或滑出这些节点。

虽然看起来一切正常，但在现有代码基础上单击不会有什么结果。因为在添加click处理程序的时候，词条还没有被添加文档中。而且即使已经把click处理程序添加到词条元素，只要一单击其他字母，这些处理程序仍然会丢失绑定。

这是通过AJAX生成页面内容时的一个常见问题。对此，一种常见的解决方案就是在页面内容更新时重新绑定处理程序。但这样做会相当繁琐，因为哪怕页面的DOM结构有一点点变化，都会调用绑定处理程序的代码。

另外一种值得推荐的做法是事件委托。在此，事件委托的本质就是把事件处理程序绑定到一个祖先元素，而这个祖先元素始终不变。对于这个例子而言，我们可以使用.live()方法把click处理程序绑定到document，以这种方式来捕获单击事件，参见代码清单6-19。

$( document ). ready( function ( ) {
$( 'h3. term' ). live( 'click', function'( ) {
$( this ). siblings( '. definition' ). slideToggle( ); 
)};
)}; 

.live()方法告诉浏览器密切注意页面上发生的任何单击事件。当（且仅当）被单击的元素与h3.term选择符匹配时，才会执行事件处理程序。这样，无论单击哪个词条，都可以正常切换相应的解释，即使对应的解释内容是通过AJAX后来添加到文档中的也没有问题。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
或者：
$("#loading").ajaxStart(function(){
$(this).show();
});

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：

$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});