CODEWITHSUNDEEP
javascriptjquery
uguMark
uguMark

Reputation: 611

Allow one element to inherit all events of another

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!

Upvotes: 0

Views: 95

Answers (2)

adeneo
adeneo

Reputation: 318272

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

Upvotes: 3

L0j1k
L0j1k

Reputation: 12635

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

Use the foreach/each() jQuery function to specify that you want these two events on EVERY <div class="linkDiv"> or <a class="linkDiv"> you want this on. The links would look like this in your page:

<div class="linkDiv">
  <a class="link" id="A" href="foo.html">Foo</a>
  <a class="link" id="B" href="fap.html">Fap</a>
</div>

Upvotes: 0

Related Questions