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

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

Edit: @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'));

Предполагая, что вы используете Prototype 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); 
    }); 
}); 

Приветствие