$.on jQuery method as replacement of delegate method

jQuery, CSS and HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){

$('#on_delegatediv').on('click', 'p', on_livefunction);
  $('#on_delegatediv').click(function(){
    $("<p>The new paragraph, or child element of Div</p>").insertAfter("#livep");
  });
});
 
function on_livefunction() {
    alert("Child paragraph clicked");
  }
 
</script>
<style>
#on_delegatediv{
width:250px;
font-weight:bold;
font-size:15px;
padding:10px;
border:1px solid red;
}
p{
width:200px;
font-weight:normal;
border:1px solid green;
padding:2px;
}
</style> 
</head>
 
<body>

<div id="on_delegatediv">Demo of $.on as replacement of delegate! Click on div text
<p id="livep">Paragraph - child of parent div </p>
</div>

 
</body>
 
</html>

Demo of $.on as replacement of delegate! Click on div text

Paragraph - child of parent div