¿Duplicar los controladores de eventos de un elemento a otro?

Question

¿Cómo se puede copiar un controlador de eventos de un elemento a otro? Por ejemplo:

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

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

Tenga en cuenta que el segundo elemento se está procesando en un momento distinto a cuando el primer elemento está recibiendo su manejador, lo que significa que esto:

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

... no lo hará trabajo.

Answer 1

No es fácil (y probablemente no debería) "copiar" el evento. Lo que puede hacer es utilizar la misma función para manejar cada uno:

var clickHandler = function() { alert('click'); }; 
// or just function clickHandler() { alert('click'); }; 

$('#firstEl').click(clickHandler); 

// and later 
$('#secondEl').click(clickHandler); 

alternativa en realidad se podría desencadenar el evento para el primer elemento en el segundo controlador:

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

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

Editar: @nickf está preocupado contaminar el espacio de nombres global, pero esto casi siempre puede evitarse envolviendo código en un objeto:

function SomeObject() { 
    this.clickHandler = function() { alert('click'); }; 
} 
SomeObject.prototype.initFirstEvent = function() { 
    $('#firstEl').click(this.clickHandler); 
}; 
SomeObject.prototype.initSecondEvent = function() { 
    $('#secondEl').click(this.clickHandler); 
}; 

o envolver el código en una función anónima y llamar inmediatamente:

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

Answer 2

¿Esto es lo que estás buscando? ..

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

Answer 3

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

Asumiendo que están usando Prototype JS (http://www.prototypejs.org/api/function/bind)

Answer 4

Quizás se encuentre interesado en el 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

Esta pregunta ya fue contestada pero para referencia futura: Se podría copiarlos iterando los eventos del elemento original y vinculando a sus manejadores con el objetivo.

> ver abajo!

// iterate event types of original 
$.each($('#original').data('events'), function() { 
    // iterate registered handler of original 
    $.each(this, function() { 
    $('#target').bind(this.type, this.handler); 
    }); 
}); 

Esto es útil cuando no se tiene control del elemento original (por ejemplo, cuando se utiliza un plug-in) y sólo quieren clonar el comportamiento de un determinado elemento.

Editar: El acceso a un controlador de eventos de elementos se ha modificado en versiones posteriores de jQuery. Esto debería funcionar si hay nuevas versiones:

$.each($._data($('#original').get(0), 'events'), function() { 
    // iterate registered handler of original 
    $.each(this, function() { 
    $('#target').bind(this.type, this.handler); 
    }); 
}); 

Saludos