第 6 章　通过 Ajax 发送数据 - 6.7　Ajax 和事件 - 《jQuery基础教程（第4版）》

6.7　Ajax 和事件

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

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

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

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

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

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

代码清单6-19

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

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