jQuery的“标签”事件

我不知道该怎么形容，但我会用一些基本的代码尝试：jQuery的“标签”事件

<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的东西，但是，最重要的是，它也将删除我们的鼠标悬停事件就像我们在上面添加的一个：

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

来源

2011-11-07 Christian

机制你'寻找的是事件命名空间：http://docs.jquery.com/Namespaced_Events

示例在你的情况：

el.bind('mouseOver.error', function() { ... }) 
el.unbind('mouseOver.error') //does not remove other mouse over events

来源

2011-11-07 11:00:32 wutz

令人印象深刻的特点！正是我需要的。 – Christian

我会建议使用jQuery namespaced events

来源

2011-11-07 11:00:35 olivieradam666

你必须使用一个命名函数来代替匿名函数

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); 
}

这只会解除绑定鼠标悬停此功能。唯一的问题是，函数onMouseOver必须被removeError看到，因为你不显示整个代码，我不能告诉你如何去做。

来源

2011-11-07 11:05:48

jQuery的“标签”事件

回答

相关问题