通过 jQuery 1.6 中的事件委托(delegate)，您可以响应已冒泡到公共(public)父级的事件。
示例实现如下:
(function($){
$.fn.myeventhandler = function () {
return this.delegate('a.next, a.prev', 'click customEvent', function (event) {
var target=$(event.target);
var bar = null;
if('click' == event.type) { /*~[ call this 'a' ]~*/
// handle the click event
$('#next-element').animate({width:'200px'},1300,function(){
bar = 'value1';
$('#next-element').animate({width:'100px'},1300,function(){
bar = 'value2';
console.log(bar);
});
});
} else if('customEvent' == event.type) { /*~[ call this 'b' ]~*/
// handle the customEvent event
$('#my-element').animate({height:'200px'},1300,function(){
bar = 'my-event1';
console.log(bar);
});
}
return false;
});
}
})(jQuery);
当您想要在页面上绑定(bind)许多事件触发器时，这种结构可以非常有效。但是，我注意到一种奇怪的行为，想知道是否有人可以启发我以下范围:
如果在 'a' 之前定义了变量 'var bar;' 并在 'a' 中使用它，并且 'a' 执行时间较长，那么如果触发 'click'第二次，“bar”变量会被重新赋值还是会创建一个新变量？
问题的原因是我有一个“未完成”的动画，其中动画需要 1.3 秒才能完成。如果我连续触发两次单击事件，则目标和类型已正确设置，但第二个动画似乎会影响第一个动画，并且两个范围似乎彼此可用。
我还没有完成动画，所以我还没有一个工作集可以放在 jsFiddle 中在线，但是这里有没有我应该研究的范围的经验法则，或者有人可以提供一些更清晰的范围解释可能已经发现了？
编辑: 在上面，我添加了与我正在使用的情况类似的情况。在上面的简化情况下，“bar”的值在两次连续调用中仍然保持预期值，但在我正在处理的更复杂的情况下(仍然)，除非我专门将参数传递到回调函数中，否则仍然存在允许两次连续调用更改参数值的条件，以便回调看到后续调用创建的值 - 而不是在其自己触发的调用中逻辑设置的值。如果有人可以在简化的示例中复制这种效果，我将不胜感激。我正在削减我的功能以尝试生成一个复制它的 jsFiddle。
谢谢， AE
请您参考如下方法:
如果您第二次单击它，则会创建一个新的条形变量，两个条形值将彼此独立。为了看到它的实际效果，我创建了一个 fiddle 。快速单击两次，您会注意到第二个时间柱采用默认值，而不是初始柱变量所具有的值，这是预期的。
