Question

我不确定如何描述这个，但我会尝试一些基本的代码：

<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

Answer 1

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

案例中的例子：

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

Answer 2

我建议使用jQuery namespaced events

Answer 3

您必须使用命名函数而不是匿名函数

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取消绑定此功能。唯一的问题是必须通过removeError看到onMouseOver函数，因为你没有显示整个代码，我无法告诉你如何去做。

jQuery“标记”事件

3 个答案: