- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) >
- jQuery中用on綁定事件時(shí)需注意哪些問(wèn)題
本篇內容介紹了“jQuery中用on綁定事件時(shí)需注意哪些問(wèn)題”的有關(guān)知識，在實(shí)際案例的操作過(guò)程中，不少人都會(huì )遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學(xué)有所成！
隨著(zhù)jQuery版本的更新，以前版本的Bind()，live()，delegate()事件可以直接被on代替，本次筆記僅以點(diǎn)擊事件為例，主要考察了on事件的用法：
一、用on監聽(tīng)點(diǎn)擊事件前添加的DOM，可以正常觸發(fā)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
var oDiv = $('<div id="test">點(diǎn)我</div>');
$(document.body).append(oDiv);
$("#test").on('click', function(){
alert('這是事件前添加的DOM,可以正常觸發(fā)點(diǎn)擊事件');
});
} );
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>二、用on監聽(tīng)點(diǎn)擊事件后添加的DOM，無(wú)法正常觸發(fā)：
<!-- 一、正常的DOM: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
$("#test").on('click', function(){
alert('這是事件后添加的DOM,無(wú)法正常觸發(fā)點(diǎn)擊事件');
});
var oDiv = $('<div id="test">點(diǎn)我</div>');
$(document.body).append(oDiv);
} );
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>三、解決辦法：利用事件委托。需要注意的是：委托的對象必須是DOM中已經(jīng)存在或者事件前動(dòng)態(tài)添加，此時(shí)，用on監聽(tīng)后后可以正常觸發(fā)事件，否則如：步驟四：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
var oWrap = $('<div id="wrap"></div>');
$(document.body).append(oWrap);
$("#wrap").on('click', $('#test'), function(){
alert('委托對象在事件前添加,可以正常觸發(fā)點(diǎn)擊事件');
});
var oDiv = $('<div id="test">點(diǎn)我</div>');
$("#wrap").append(oDiv);
} );
</script>
</head>
<body>
</body>
</html>四、委托對象在事件后添加，無(wú)法觸發(fā)點(diǎn)擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
$("#wrap").on('click', $('#test'), function(){
alert('委托對象在事件后添加,無(wú)法正常觸發(fā)點(diǎn)擊事件');
});
var oWrap = $('<div id="wrap"></div>');
$(document.body).append(oWrap);
var oDiv = $('<div id="test">點(diǎn)我</div>');
$("#wrap").append(oDiv);
} );
</script>
</head>
<body>
</body>
</html>五、說(shuō)明：工作中，on事件比較常用的還是事件綁定和事件委托，至少我碰到的比較多，live事件on用法主要是前面的jQuery對象變成了document，如：$(document).on(),故不另作舉例。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系QQ:712375056 進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
