[英]jQuery “tagging” events
I'm not sure how to describe this, but I'll try with some basic code: 我不确定如何描述这一点,但是我将尝试一些基本代码:
<input type="text" id="num" placeholder="eg: 55"/>
Let's say we add some basic filtering code: 假设我们添加了一些基本的过滤代码:
$('.num').keyUp(function(){
this.value = parseInt(this.value);
});
This is what the end-developer does. 这就是最终开发人员的工作。 Now let's imagine the s/he also uses a form validation system of our design:
现在,让我们假设他/她还使用了我们设计的表单验证系统:
// ...
if(el.val()!=parseInt(el.val()))
showError(el);
// ...
Let us presume our showError shows a tooltip only when the user hover over it: 让我们假设showError仅在用户将鼠标悬停在其上时显示工具提示:
function showError (el){
el.css('border-color', 'red');
el.mouseOver(function(){
showErrorTooltip(this);
});
}
That works fine, but what if the error has been fixed? 效果很好,但是如果错误已解决怎么办? With jQuery, you'd usually do:
使用jQuery,通常可以执行以下操作:
removeError(el);
This function would remove some CSS stuff from the element in question, but, most importantly, it will also remove our mouseOver event like the one we added above: 此函数将从有问题的元素中删除一些CSS内容,但最重要的是,它还将删除我们的mouseOver事件,就像我们在上面添加的事件一样:
function removeError(el){
el.css('border-color': null); // default color
el.unbind('mouseOver');
}
This works well until the end developer needs to do something flashy when the mouse hover over the element, by using jQuery's mouseOver. 这很有效,直到最终开发人员需要使用jQuery的mouseOver将鼠标悬停在元素上时做一些浮华的工作。
The problem is, my removeError function clears both my event as well as the developer's event. 问题是,我的removeError函数同时清除了我的事件以及开发人员的事件。
So, my final question is, how do I tag event callbacks so I can remove them selectively? 所以,我的最后一个问题是, 如何标记事件回调,以便可以有选择地删除它们?
If the above didn't seem to make sense, this is some pseudo-code on what the result might look like: 如果上面的方法似乎没有道理,那么这是一些伪代码,说明结果可能是什么样的:
Something like: 就像是:
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
The mechanism you're looking for is event namespacing: http://docs.jquery.com/Namespaced_Events 您正在寻找的机制是事件名称间隔: http : //docs.jquery.com/Namespaced_Events
Example in your case: 您的示例:
el.bind('mouseOver.error', function() { ... })
el.unbind('mouseOver.error') //does not remove other mouse over events
我建议使用jQuery命名空间事件
You have to use a named function instead of an anonymous function 您必须使用命名函数而不是匿名函数
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);
}
This will only unbind this function from mouseOver. 这只会从mouseOver解除绑定此功能。 The only problem is that the function onMouseOver has to be seen by removeError, since you dont show the whole code I am not able to tell you how to do it.
唯一的问题是onMouseOver函数必须由removeError看到,因为您没有显示整个代码,所以我无法告诉您如何执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.