我想要一些方法来添加和删除元素的唯一命名事件,这样我就可以确保事件永远不会被添加多次。当您向元素添加事件时,它们会相互堆叠,即使其中两个事件是同一事件。对于一个简单但抽象的例子:
$('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()。on()的方法,但这一次只允许一个事件。
$('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
我的问题是两个:
答案 0 :(得分:3)
查看命名空间事件: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/
但是,您应该尝试更好地组织代码,这样您就不会将同一事件应用两次..
答案 1 :(得分:1)
.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'