Dupliquer les gestionnaires d'événements d'un élément sur un autre?

Question

Comment copier un gestionnaire d'événements d'un élément à un autre? Par exemple:

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

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

Notez que le deuxième élément est en cours de traitement à un autre moment au moment où le premier élément devient son gestionnaire, ce qui signifie que ceci:

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

... ne travail.

Answer 1

Vous ne pouvez pas facilement (et ne devriez pas) "copier" l'événement. Ce que vous pouvez faire est d'utiliser la même fonction pour gérer chaque:

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

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

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

Sinon, vous pouvez effectivement déclencher l'événement pour le premier élément dans le second gestionnaire:

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

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

Edit: @nickf est inquiet la pollution de l'espace de noms global, mais cela peut être évité presque toujours par le code d'emballage dans un objet:

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

ou envelopper votre code dans une fonction anonyme et de l'appeler immédiatement:

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

Answer 2

Est-ce ce que vous cherchez? .

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

Answer 3

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

En supposant que vous utilisez Prototype JS (http://www.prototypejs.org/api/function/bind)

Answer 4

Vous pourriez être intéressé par le 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

Cette question a été déjà répondu, mais à titre de référence: vous pouvez les copier en itérant les événements de l'élément d'origine et en liant leurs gestionnaires à la cible.

> voir les éditions ci-dessous!

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

Ceci est pratique quand on n'a pas le contrôle de l'élément d'origine (par exemple lors de l'utilisation d'un plug-in) et que vous voulez juste pour cloner le comportement d'un certain élément.

Édition: L'accès aux gestionnaires d'événements d'un élément a été modifié dans les versions ultérieures de jQuery. Cela devrait fonctionner pour les versions plus récentes:

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

Vive