Question

Mootools has the following syntax for delegating unique event handlers to child elements of a given parent element using different event types. Does a similar syntax exist in jQuery? I’m trying to avoid writing a separate case for each element I want to attach an element to.

$('myElement').addEvents({
    // monitor an element for mouseover
    mouseover: fn,
    // but only monitor child links for clicks
    'click:relay(a)': fn2
});

I’m more interested in the second item being passed, which basically says “if I click on an anchor inside of #myElement, call this function.” I can easily expand on this list to add more unique event handlers to other children using whatever event I’d like.

Answer 1

The closest I can think of is on():

$('#myElement').on('mouseover', 'a', function(){
        // do something when an a element within the '#myElement' element is moused-over
    });

There’s also delegate(), which achieves much the same, but uses slightly different syntax:

$('#myElement').delegate('a', 'mouseover', function(){
    // do something when the 'a' within the '#myElement' element is moused-over
});

JS Fiddle demo.

References:

• delegate().
• on().