添加和刪除獨特的jQuery事件（onUnique/offUnique？）

Question

我想要某種方式來爲元素添加和刪除唯一的命名事件，這樣我就可以確保事件永遠不會被添加多次。當你添加事件到一個元素時，即使它們中的兩個意圖是相同的事件，它們也會相互疊加。對於一個簡單的 - 丁abstracted-例如：

$('a').on("click", function(e){ console.log("Hi One"); }); // 1 
$('a').on("click", function(e){ console.log("Hi One"); }); // duplicate 
$('a').on("click", function(e){ console.log("Hi Two"); }); // 2 
// Output will be: Hi One, Hi One, Hi Two 

我嘗試使用像.off（的方法）上（），但只允許一次一個事件。

$('a').off("click").on("click", function(e){ console.log("Hi One"); }); 
$('a').off("click").on("click", function(e){ console.log("Hi One"); }); 
$('a').off("click").on("click", function(e){ console.log("Hi Two"); }); 
// Output will be: Hi Two 

所以我想出了這個擴展的jQuery：

$.fn.onUnique = function (
    /* uniqueEventName, events [,selector] [,data], handler(eventObject) */ 
) { 
    var uniqueEventNameArray = this.data("uniqueEvents") || []; 
    var uniqueEventName   = arguments[0]; 
    if ($.inArray(uniqueEventName, uniqueEventNameArray) == -1) { 
     uniqueEventNameArray.push(uniqueEventName); 
     this.data("uniqueEvents", uniqueEventNameArray); 
     this.on(arguments[1], arguments[2], arguments[3], arguments[4]); 
    } 
}; 

所以我能得到我想要的效果...

$('a').onUnique("Hi1", "click", function(e){ console.log("Hi One"); }); 
$('a').onUnique("Hi1", "click", function(e){ console.log("Hi One"); }); 
$('a').onUnique("Hi2", "click", function(e){ console.log("Hi Two"); }); 
// Output will be: Hi One, Hi Two 

我的問題有兩個：

1. 有沒有更好的方法來做到這一點？
2. 我該如何做.offUnique（）的等價物，它只會刪除指定的事件（按名稱）？

Answer 1

退房的命名空間的事件：event.namespace

$('a').off('click.hi1').on('click.hi1', function(e){ console.log("Hi One"); }); 
$('a').off('click.hi1').on('click.hi1', function(e){ console.log("Hi One"); }); 
$('a').off('click.hi2').on('click.hi2', function(e){ console.log("Hi Two"); }); 

演示http://jsfiddle.net/gaby/378rP/

---

你或許應該，但是，試圖更好地組織你的代碼，這樣你就不能申請兩次同樣的事件..

Answer 2

.on（）支持您要查找的所有內容。您不僅可以做獨特的活動名稱，但您也可以通過鏈接或事件，地圖的多個事件：

$('a').on('click.h1', function(){console.log('Hi One')}).on('click.h2', function(){console.log('Hi Two')}); 

或

$('a').on({ 
    'click.h1' : function(){console.log('Hi One')}, 
    'click.h2' : function(){console.log('Hi Two')} 
}); 
$('a').off('click.h1'); 
//Output is 'Hi Two'