Question

For example say i have 2 links, A and B.
If a user hovers over A, the hover event of B will get triggered. Likewise with all other events like onlick, mouseover etc.

I’m not looking for adding the events manually like this:

$('a#A').click(function(){
  $('a#B').trigger('click');
});

Thanks!

Answer 1

You can do this with multiple events like so:

$('a#A').on('click mouseenter mouseleave', function(e){
  $('a#B').trigger(e.type);
});

This will trigger any of the specified events bound on #B, like :

$("#B").on({
    mouseenter: function() {
        this.style.color = "#B4B4B4";
    },
    mouseleave: function() {
        this.style.color = "#000";
    }

});

FIDDLE

Now to make that really inefficient, lets get all the events bound to #B and trigger them with #A :

$("#B").on({
    mouseenter: function() {
        this.style.color = "#B4B4B4";
    },
    mouseleave: function() {
        this.style.color = "#000";
    }

});

var events = [];
$.each($._data($("#B").get(0), "events"), function(i, e) {
    events.push(i); //gets all events currently bound to #B
});

$('a#A').on(events.join(' '), function(e){  //and triggers them with #A
  $('a#B').trigger(e.type);
});

FIDDLE