Duplica i gestori di eventi di un elemento su un altro?

Question

Come si copia un gestore eventi da un elemento a un altro? Per esempio:

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

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

Nota che il secondo elemento è in fase di elaborazione in un momento diverso da quando il primo elemento è sempre suo gestore, il che significa che questo:

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

... non lo farà lavoro.

Answer 1

Non è possibile (e probabilmente non dovrebbe) "copiare" l'evento. Che cosa si può fare è utilizzare la stessa funzione per gestire ogni:

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

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

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

In alternativa si potrebbe effettivamente generare l'evento per il primo elemento del secondo gestore:

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

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

Edit: @nickf è preoccupato inquinare il namespace globale, ma questo può quasi sempre essere evitato avvolgendo il codice in un oggetto:

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

o avvolgendo il codice in una funzione anonima e chiamando immediatamente:

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

Answer 2

È questo quello che stai cercando? ..

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

Answer 3

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

si Supponendo che stanno usando Prototype JS (http://www.prototypejs.org/api/function/bind)

Answer 4

si potrebbe essere interessato al 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

La domanda è stata già risposto, ma per riferimento futuro: si poteva copiarli iterando gli eventi dell'elemento originale e legando i loro gestori al bersaglio.

> vedi modifica qui sotto!

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

Questo è utile quando non si ha il controllo dell'elemento originale (per esempio quando si utilizza un plug-in) e vogliono solo per clonare il comportamento di un determinato elemento.

Modifica: L'accesso a un gestore di eventi di elementi è stato modificato nelle versioni successive di jQuery. Questo dovrebbe funzionare per le versioni più recenti:

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

Acclamazioni