Using jQuery .on()

Shows an element that only has to bubble up once to fire. Useful for having dynamic elements that are added after DOM loads and having the event "attached" already.

by VtoCorleone

HTML

<div id="a">
    <div id="b">
    </div>
    <div id="c">
    </div>
    <div id="d">
    </div>
    <div id="e">
    </div>
</div>

CSS

#a
{
    border:1px solid black; width: 300px; height: 300px;
}
#b, #c
{
    border:1px solid black; width: 100px; height: 100px; float: left;
}
#d, #e
{
    border:1px solid black; width: 100px; height: 100px; float: right;
}

JavaScript

$('#a').on('click', 'div', function() {
    alert('I WAS ATTACHED!');
});