Use of jquery "on" to get the same effect of "live"

Since jquery's "live(http://api.jquery.com/live/) is deprected and has performance problems the better approach is to use live (http://api.jquery.com/on/). Here is a sample

by rahul71

HTML

<!--Since jquery's "live(http://api.jquery.com/live/) is deprected and has performance problems the better approach is to use live (http://api.jquery.com/on/).-->

<div id="div1"> click me to add a clickable button</div>

<div id="contrainer">
    
</div>

<div id="logger">
    
</div>

CSS

#logger
{
  background-color:#eaeaea;  
}
#contrainer
{
  background-color:yellow;
}

JavaScript

$(function() {
    var div1 = $("#div1");
    var c1 = $("#contrainer");
    var logger = $("#logger");


    //notice that we pass .btn as a filter 
    //and buttons created later are still used
    $("body").on("click", ".btn", function() {
        logger.append("clicked<br/>");
    });


    div1.click(function() {
        c1.append('<input type="button" value="Clickable" class="btn"/><br/>');
    });
});