Дублировать обработчики событий одного элемента на другой?

Question

Как скопировать обработчик событий из одного элемента в другой? Например:

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

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

Обратите внимание, что второй элемент обрабатывается не в то время, когда первый элемент получает свой обработчик, а это означает:

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

... не будет работать.

Answer 1

На этот вопрос уже был дан ответ, но для дальнейшего использования: вы можете скопировать его, повторяя события исходного элемента и связывая их обработчики с целью.

> см. Правку ниже!

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

Приветствия

Answer 2

Вы не можете легко (и, вероятно, не должны) «копировать» событие. То, что вы можете сделать, это использовать одну и ту же функцию для обработки каждого:

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 3

Вас может заинтересовать метод triggerHandler

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

Answer 4

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

Answer 5

$ ('# secondEl'). Click = $ ('# firstEl'). Click.bind ($ ('# secondEl'));

Предполагается, что вы используете прототип JS (http://www.prototypejs.org/api/function/bind)

Answer 6

Это то, что вы ищете?

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