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

基本沒什么區別，只是前者是靜態處理事件而后者是動態處理事件。