jQuery教程(24)-ajax操作之Ajax和事件

文章标签: jquery,jquery-ajax
2015-1-16 13:09:57     14 人阅读    

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

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

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


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


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


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

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


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


原文地址:http://www.itmmd.com/201501/504.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

java时区转化相关工具方法   上一篇
下一篇  jQuery教程(22)-ajax操作之错误处理

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!