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的「標籤」事件

回答

相關問題