你将会频繁地使用jQuery添加新的元素到页面中,你将有可能需要绑定一些已经存在在页面上的事件到这些新元素上。
相对于在为页面添加元素的时候重复绑定事件,你可以使用事件委托。
通过事件委托将事件绑定到容器元素,当事件被触发的时候,可以知道事件是在哪个容器元素被触发。
如果这听起来很复杂,幸运地jQuery提供了$.fn.live
和$.fn.delegate
方法让这个过程变得很简单。
当大多数的人在处理后来才被添加到页面的元素时才使用委托,就算你从不添加更多的元素到页面,委托也有性能上的优势。 绑定事件处理器到成百上千的不同元素所需的时间并不是小数目,如果你有很多元素,你应该考虑将相关的事件委托到一个容器元素中。
从jQuery 1.3开始提供了$.fn.live
方法,在1.3版本这个方法只支持特定的事件类型。
自从jQuery 1.4.2开始提供$.fn.delegate
方法,应优先选择这个方法。
Example 5.10. 使用$.fn.delegate
委托事件
$('#myUnorderedList').delegate('li', 'click', function(e) { var $myListItem = $(this); // ... });
Example 5.11. 使用$.fn.live
委托事件
$('#myUnorderedList li').live('click', function(e) { var $myListItem = $(this); // ... });
Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.