var a = $('<div class="cl">创建节点</div>');

a.appendTo('body');

$('.cl').click(function(){console.log('click无on')});

$('body').append('<div class="cl">新建节点</div>')；

click定义了以后，只对上文的dom有效果，下文新建的dom是没有这个事件的

on了以后，不管是上文拥有的dom，还是新建的dom，都有这个事件

一个很简单的例子：

不用on：

var a = $('<div class="cl">创建节点</div>');

a.appendTo('body');

$('.cl').click(function(){console.log('click无on')});

$('body').append('<div class="cl">新建节点</div>')；

这个只有创建节点这个dom上点击有console，新建节点没有console

下面用on：

var a = $('<div class="cl">创建节点</div>');

a.appendTo('body');

$(document).on('click', '.cl', function(){console.log('click有on')});

$('body').append('<div class="cl">新建节点</div>');

这个创建节点和新建节点都有console

基本没什么区别，只是前者是静态处理事件而后者是动态处理事件。