Understanding event bubbling

by Patrick Hund

HTML

<div id="outer">
    <div id="inner">
        <button id="button">click me</button>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $('#button').on('click', function () {
        console.log('triggering button:click');
        $('#inner').trigger('button:click');
    });
    $('#outer').on('button:click', function () {
        console.log('received button:click');
    });
});