Direct events catch bubbling events

by Rui Figueiredo

HTML

<div>
    <input type="button" value="add button" id="buttonAddMore"/>
    <input type="button" value="click me" id="button1"/>    
    <span id="whatClicked"></span>
</div>

JavaScript

var btCount=2;

$('#buttonAddMore').on("click", function(){
    btCount+=1;
    $('div :button:last').after('<input type="button" value="button' + btCount + '" id="button ' + btCount + '"/>');
});

$('div').on("click", function(event){
    $('#whatClicked').text("the id of the clicked element inside the div is: " + event.target.id);
});