Question

I have DOM is like this:

<a href='javascript:void(0)' id='link1'>Element with  events bound initially</a>
<a href='javascript:void(0)' id='link2'>Element to which events are bound in future</a>

And this javascript:

$(function(){
    $('#link1').bind('click',function(){alert('do something to make me happy');})
});

Now some time in future i want to copy all events bound on link1 to link2. I am doing it as written below please suggest some better way if possible or available.

var _elmEvents = $(#link1).data('events');

if (_elmEvents) {
    $.each(_elmEvents, function (event, handlers) {
        $.each(handlers, function (j, handler) {
            $('#link2').bind(event, handler);
        });
    });
}

Answer 1

If you want to copy all events from one object to another without cloning, you can do so by accessing the events data directly.

For instance, if you did:

$("#the_link").click(function(e){
    // do some stuff
    return false;
}).mouseover(function(e){
    // do some other stuff
});

You can access those event associates in the ‘events’ data of the element

var events = $("#the_link").data('events');

It will be an object whose keys represent the event type, each containing an array of event associations. Regardless, here’s a simple example, not accounting for namespaces.

var events = $("#the_link").data('events');
var $other_link = $("#other_link");
if ( events ) {
    for ( var eventType in events ) {
        for ( var idx in events[eventType] ) {
            // this will essentially do $other_link.click( fn ) for each bound event
            $other_link[ eventType ]( events[eventType][idx].handler );
        }
    }
}