on() 和 click() 的区别: on()可以删除动态创建的标签，click()不可以
二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。
html:
<li class="newOn">原先的Html</li>
<li class="newClick">原先的Html</li>
<div class="container">
<li class="deleteon">on删除</li>
<li class="deleteclick">click删除</li>
</div>
js:
$('.newOn').click(function(){
$('.container').append("<li class='deleteon'>on删除</li>");
})
$('.newClick').click(function(){
$('.container').append("<li class='deleteclick'>click删除</li>");
})
$(this).on('click','.deleteon',function(){
alert('dd')
console.log(this) //li标签
$(this).remove();
})
/方法二：
$('.container').on('click','.deleteon',function(){
alert('dd')
console.log(this) //li标签
$(this).remove();
})/
$('.deleteclick').click(function(){
$('.deleteclick').remove();
})
对于动态绑定元素可以这样写
$(document).on('click', '.xxx', function() {
// do something
});
$(document)可以改成要绑定事件元素的父节点
.xxx 就是指的当前元素
这样就可以实现事件的代理
//一个标签绑定多个事件
$('.gejin').on('click mouseover',function(){
$('.gejin,.xiechang').css('color','blue');
})
//多个标签绑定多个事件
$('.xiechang,.gejin').on({
click:function(){alert('sss')},
mouseover:function(){$(this).css('color','red')},
mouseout:function(){$(this).css('color','blue')}
})
