Question

I have some html code having hierarchy as

<div id="a">
    <span>
        <span id="s1">...</span>
        <span id="s2">...</span>
        <span id="s3">...</span>
    </span>
</div>

I want to attach event handlers to s1,s2,s3 And assume that I don’t know id div.span.
I tried out

$('#a span span').click(function(){
    alert('called');
});

But this does not work. Is there any other option to access grand children of an element.

Answer 1

Try using on() and > * > *. The > means children. Without it, it would mean descendants. Then first > * is children, the second > * is the children of the children or “grand children”

$('#a > * > *').on('click', function() {
    alert('called');
});

i removed my first answer (the delegated version of on()) one since I can’t get it to work on jsFiddle. I’m not sure why it doesn’t work.