How to fire an element's click function when another element is clicked instead?

Question

Maybe a weird question but I can't figure it out.

Let's say I have a link which, when clicked, does something. Different events are assigned to its click method while the application works. Let's say this link is:

<a id="link1">Link 1</a>

Now, let's say there's another link, for instance:

<a id="link2">Link 2</a>

Is there a way, quite simply, to tell Link 2 to fire Link 1's click event/ function?

$('#link2').click(function(){
    //find out what Link 1 does when clicked and do the same
});

I know there are different ways of getting this to work, such as simply assigning the same events to link1 and link2. I'm more interested from a theoretical standpoint if there's a syntax for what I want to do above.

Answer 1

Fiddle : http://jsfiddle.net/MrZzV/

This isn't as simple as you might have expected, as there's no clear way to pass context to a click event, however you can use the jQuery.data

the code :

$('#link2').click(function(){
    jQuery.data( $('#link1')[0] , "caller", this );
    $('#link1').click();
    jQuery.data( $('#link1')[0] , "caller", false );
});


$('#link1').click(function(){

   if(jQuery.data( $('#link1')[0] , "caller") === false)
   {
       caller = this;  

   }
   else
   {
           var caller = jQuery.data( $('#link1')[0] , "caller");

   }
   console.log(caller);


});

as you'll see, the caller is indeed different depends who you click

update : minor fix to the code, udpated fiddle

Answer 2

$('#link2').click(function(){
    $('#link1').click();
});

Reference

Answer 3

"Is there a way, quite simply, to tell Link 2 to do whatever Link 1 does?"

Yes there is. You may trigger the click event that was bound to the first link with .click() or:

$('#link2').click(function() {
    $('#link1').trigger('click');
});

UPD: As initially it was not clear whether you need to preserve the context in the event execution or not, the solution provided above will not perform same actions ( if they are ) with #link2 element. So in case of event as below, on #link2 click you'll still get #link1 red and #link2 unchanged:

$('#link1').click(function() {
    $(this).css('color', '#f00');
});

However, if you want to keep context of event in the element you initially clicked and make it aware of this and e.target as #link2 , you may do something like that:

$('#link2').click(function() {
    var e = $._data($('#link1')[0], 'events');
    e.click[0].handler.apply(this, arguments);
});

... which is not very much compact, clear, flexible and reliable, so good old multi element selection will do the job without overcomplicating the things:

$('#link1, #link2').click(function() {
    $(this).css('color', '#f00');
});

DEMO: http://jsfiddle.net/uRgxe/

Answer 4

We can choose both links in selector

$("#link1,#link2").click(function()
{
      //write common code
});