將一個元素的事件處理程序複製到另一個元素上？

Question

如何將一個事件處理程序從一個元素複製到另一個元素？例如：

$('#firstEl') 
    .click(function() { 
     alert("Handled!"); 
    }) 
; 

// here's where the magic happens 
$('#secondEl').click = $('#firstEl').click; // ???? 

注意，第二個元素在不同的時間被處理時的第一要素是獲取其處理程序，這意味着這樣的：

$('#firstEl, #secondEl').click(function() { ... }); 

...不會工作。

Answer 1

您不能輕易（也可能不應該）「複製」事件。你可以做的是使用相同的函數來處理每個：

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); 
})(); 

Answer 2

這是你在找什麼？ 。

var clickHandler = function() { alert("Handled!"); } 
$('#firstEl').click(clickHandler); 
$('#secondEl').click(clickHandler); 

Answer 3

$（ '＃secondEl'）點擊= $（ '＃firstEl'）click.bind（$（ '＃secondEl'））;

假設你正在使用原型JS（http://www.prototypejs.org/api/function/bind）

Answer 4

你可能會感興趣的triggerHandler method

// here's where the magic happens 
//$('#secondEl').click = $('#firstEl').click; // ???? 
$('#secondEl').click(function() { 
    $('#firstEl').triggerHandler('click'); 
}); 

Answer 5

http://www.learningjquery.com/2007/01/copy-events-from-one-element-to-another

Answer 6

這個問題已經回答了，但以供將來參考：你可以將它們拷貝通過迭代原始元素的事件並將其處理程序綁定到目標。

>請參閱下面的編輯！

// 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); 
    }); 
}); 

乾杯遺憾的是沒有一個答案