将一个元素的事件处理程序复制到另一个元素上?
如何将事件处理程序从一个元素复制到另一个元素? 例如:
$('#firstEl') .click(function() { alert("Handled!"); }) ; // here's where the magic happens $('#secondEl').click = $('#firstEl').click; // ????
请注意,第二个元素在第一个元素获取其处理程序的不同时间处理,这意味着:
$('#firstEl, #secondEl').click(function() { ... });
……不行。
这个问题已经回答了,但是为了将来的参考:您可以通过迭代原始元素的事件并将其处理程序绑定到目标来复制它们。
>见下面的编辑!
// iterate event types of original $.each($('#original').data('events'), function() { // iterate registered handler of original $.each(this, function() { $('#target').bind(this.type, this.handler); }); });
当您无法控制原始元素(例如,使用插件时)并且只想克隆某个元素的行为时,这很方便。
编辑:在以后的jQuery版本中更改了对元素事件处理程序的访问。 这适用于较新的版本:
$.each($._data($('#original').get(0), 'events'), function() { // iterate registered handler of original $.each(this, function() { $('#target').bind(this.type, this.handler); }); });
干杯
你不能轻易(也可能不应该)“复制”这个事件。 你可以做的是使用相同的function来处理每个:
var clickHandler = function() { alert('click'); }; // or just function clickHandler() { alert('click'); }; $('#firstEl').click(clickHandler); // and later $('#secondEl').click(clickHandler);
或者,您实际上可以为第二个处理程序中的第一个元素触发事件:
$('#firstEl').click(function() { alert('click'); }); $('secondEl').click(function() { $('#firstEl').click(); });
编辑:@nickf担心污染全局命名空间,但通过将代码包装在对象中几乎总能避免这种情况:
function SomeObject() { this.clickHandler = function() { alert('click'); }; } SomeObject.prototype.initFirstEvent = function() { $('#firstEl').click(this.clickHandler); }; SomeObject.prototype.initSecondEvent = function() { $('#secondEl').click(this.clickHandler); };
或者将代码包装在匿名函数中并立即调用它:
(function() { var clickHandler = function() { alert('click'); }; $('#firstEl').click(clickHandler); $('#secondEl').click(clickHandler); })();
您可能对triggerHandler方法感兴趣
// here's where the magic happens //$('#secondEl').click = $('#firstEl').click; // ???? $('#secondEl').click(function() { $('#firstEl').triggerHandler('click'); });
这是你想要的?
var clickHandler = function() { alert("Handled!"); } $('#firstEl').click(clickHandler); $('#secondEl').click(clickHandler);
$(’#secondEl’)。click = $(’#firstEl’)。click.bind($(’#secondEl’));
假设您使用的是Prototype JS( http://www.prototypejs.org/api/function/bind )