[英]jQuery “tagging” events
我不确定如何描述这一点,但是我将尝试一些基本代码:
<input type="text" id="num" placeholder="eg: 55"/>
假设我们添加了一些基本的过滤代码:
$('.num').keyUp(function(){
this.value = parseInt(this.value);
});
这就是最终开发人员的工作。 现在,让我们假设他/她还使用了我们设计的表单验证系统:
// ...
if(el.val()!=parseInt(el.val()))
showError(el);
// ...
让我们假设showError仅在用户将鼠标悬停在其上时显示工具提示:
function showError (el){
el.css('border-color', 'red');
el.mouseOver(function(){
showErrorTooltip(this);
});
}
效果很好,但是如果错误已解决怎么办? 使用jQuery,通常可以执行以下操作:
removeError(el);
此函数将从有问题的元素中删除一些CSS内容,但最重要的是,它还将删除我们的mouseOver事件,就像我们在上面添加的事件一样:
function removeError(el){
el.css('border-color': null); // default color
el.unbind('mouseOver');
}
这很有效,直到最终开发人员需要使用jQuery的mouseOver将鼠标悬停在元素上时做一些浮华的工作。
问题是,我的removeError函数同时清除了我的事件以及开发人员的事件。
所以,我的最后一个问题是, 如何标记事件回调,以便可以有选择地删除它们?
如果上面的方法似乎没有道理,那么这是一些伪代码,说明结果可能是什么样的:
就像是:
var tag_a = $('#a').click(function(){ alert('test1'); });
var tag_b = $('#a').click(function(){ alert('test2'); });
$('#a').unbind(tag_a);
$('#a').click(); // shows test2 only
您正在寻找的机制是事件名称间隔: http : //docs.jquery.com/Namespaced_Events
您的示例:
el.bind('mouseOver.error', function() { ... })
el.unbind('mouseOver.error') //does not remove other mouse over events
我建议使用jQuery命名空间事件
您必须使用命名函数而不是匿名函数
function showError (el){
var onMouseOver = function(){
showErrorTooltip(this);
});
el.css('border-color', 'red');
el.bind('mouseOver', onMouseOver);
}
function removeError(el){
el.css('border-color': null); // default color
el.unbind('mouseOver', onMouseOver);
}
这只会从mouseOver解除绑定此功能。 唯一的问题是onMouseOver函数必须由removeError看到,因为您没有显示整个代码,所以我无法告诉您如何执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.