How do you copy an event handler from one element to another? For example:
$('#firstEl')
.click(function() {
alert("Handled!");
})
;
// here's where the magic happens
$('#secondEl').click = $('#firstEl').click; // ????
Note that the second element is being processed at a different time to when the first element is getting its handler, meaning that this:
$('#firstEl, #secondEl').click(function() { ... });
...won't work.
This question was already answered but for future reference: you could copy them by iterating the events of the original element and binding their handlers to the target.
> see edit below!
// iterate event types of original
$.each($('#original').data('events'), function() {
// iterate registered handler of original
$.each(this, function() {
$('#target').bind(this.type, this.handler);
});
});
This is handy when you have no control of the original element (e.g. when using a plugin) and just want to clone the behavior of a certain element.
Edit: Access to an elements event handlers has been changed in later jQuery versions. This should work for newer versions:
$.each($._data($('#original').get(0), 'events'), function() {
// iterate registered handler of original
$.each(this, function() {
$('#target').bind(this.type, this.handler);
});
});
Cheers
You can't easily (and probably shouldn't) "copy" the event. What you can do is use the same function to handle each:
var clickHandler = function() { alert('click'); };
// or just function clickHandler() { alert('click'); };
$('#firstEl').click(clickHandler);
// and later
$('#secondEl').click(clickHandler);
Alternatively you could actually fire the event for the first element in the second handler:
$('#firstEl').click(function() {
alert('click');
});
$('secondEl').click(function() {
$('#firstEl').click();
});
Edit: @nickf is worried about polluting the global namespace, but this can almost always be avoided by wrapping code in an object:
function SomeObject() {
this.clickHandler = function() { alert('click'); };
}
SomeObject.prototype.initFirstEvent = function() {
$('#firstEl').click(this.clickHandler);
};
SomeObject.prototype.initSecondEvent = function() {
$('#secondEl').click(this.clickHandler);
};
or wrapping your code in an anonymous function and calling it immediately:
(function() {
var clickHandler = function() { alert('click'); };
$('#firstEl').click(clickHandler);
$('#secondEl').click(clickHandler);
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With