on() 和 click() 的區(qū)別: on()可以刪除動態(tài)創(chuàng)建的標(biāo)簽琼蚯，click()不可以
二者在綁定靜態(tài)控件時沒有區(qū)別，但是如果面對動態(tài)產(chǎn)生的控件惠况，只有 on() 能成功的綁定到動態(tài)控件中遭庶。
以下實例中原先的 HTML 元素點擊其身后的 Delete 按鈕就會被刪除。而動態(tài)添加的 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標(biāo)簽
$(this).remove();
})
/方法二：
$('.container').on('click','.deleteon',function(){
alert('dd')
console.log(this) //li標(biāo)簽
$(this).remove();
})/
$('.deleteclick').click(function(){
$('.deleteclick').remove();
})
對于動態(tài)綁定元素可以這樣寫
$(document).on('click', '.xxx', function() {
// do something
});
$(document)可以改成要綁定事件元素的父節(jié)點
.xxx 就是指的當(dāng)前元素
這樣就可以實現(xiàn)事件的代理
//一個標(biāo)簽綁定多個事件
$('.gejin').on('click mouseover',function(){
$('.gejin,.xiechang').css('color','blue');
})
//多個標(biāo)簽綁定多個事件
$('.xiechang,.gejin').on({
click:function(){alert('sss')},
mouseover:function(){$(this).css('color','red')},
mouseout:function(){$(this).css('color','blue')}
})
