Three time firing of click event on dynamically created element

Three time firing of click event on dynamically created element

I am facing very simple problem. I am trying to add click event on the
dynamically generated elements like this
$(document).ready(function(){
$('ul').on('click', 'li.clickable', function() {
console.log( $(this).text() );
});
});
<ul id="codingView">
<li id="" style="display:none;" class="clickable"><span></span></li>
</ul>
Here I have created two li elements dynamically.
The problem is that console is writing 3 times on every click on li. Why?
Any workaround.