on()和click()区别

on() 和 click() 的区别: on()可以删除动态创建的标签，click()不可以

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。

html:

原先的Html

原先的Html

on删除

click删除

js:
$('.newOn').click(function(){
$('.container').append("

on删除

");
})
$('.newClick').click(function(){
$('.container').append("

click删除

");
})
$(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')}
})