jQuery/JS event propagation/bubbling, dynamically added elements

by lasha

HTML

<div id="jerry-test">
    <div id="lasha-test">
        <ul>
            <li>Item 1</li>
        </ul>
    </div>
</div>

JavaScript

$('#lasha-test').on('click', 'li', function(event){
    console.log('lasha', this.innerHTML);                
    event.stopPropagation();
});

$('#jerry-test').on('click', 'li', function(event){
    console.log('jerry', event);                
});

var i=1;
setInterval(function(){
i++;    
    $('ul').append('<li>Item ' + i + '</li>');
}, 1000);