Mit der Aktualisierung der jQuery-Version können die Ereignisse Bind(), live() und Delegate() der vorherigen Version direkt durch on ersetzt werden. In diesem Hinweis wird nur das Click-Ereignis als Beispiel verwendet und hauptsächlich untersucht die Verwendung von on-Ereignissen: Dieser Artikel stellt hauptsächlich die Dinge vor, die bei der Verwendung von on zum Binden von Ereignissen in jQuery beachtet werden müssen, was einen guten Referenzwert hat. Werfen wir einen Blick mit dem untenstehenden Editor. Ich hoffe, er kann allen helfen.
1. Verwenden Sie on, um das vor dem Klickereignis hinzugefügte DOM zu überwachen, das normal ausgelöst werden kann:
<!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 op = $('<p id="test">点我</p>');
$(document.body).append(op);
$("#test").on('click', function(){
alert('这是事件前添加的DOM,可以正常触发点击事件');
});
} );
</script>
</head>
<body>
<p id="wrap"></p>
</body>
</html>2 . Das nach der Verwendung von on zur Überwachung des Klickereignisses hinzugefügte DOM kann nicht normal ausgelöst werden:
<!-- 一、正常的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,无法正常触发点击事件');
});
var op = $('<p id="test">点我</p>');
$(document.body).append(op);
} );
</script>
</head>
<body>
<p id="wrap"></p>
</body>
</html>3. Lösung: Verwenden Veranstaltungsdelegation. Es ist zu beachten, dass das delegierte Objekt bereits im DOM vorhanden sein oder vor dem Ereignis dynamisch hinzugefügt werden muss. Zu diesem Zeitpunkt kann das Ereignis nach Verwendung von on zum Abhören normal ausgelöst werden 🎜>
<!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 = $('<p id="wrap"></p>');
$(document.body).append(oWrap);
$("#wrap").on('click', $('#test'), function(){
alert('委托对象在事件前添加,可以正常触发点击事件');
});
var op = $('<p id="test">点我</p>');
$("#wrap").append(op);
} );
</script>
</head>
<body>
</body>
</html><!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('委托对象在事件后添加,无法正常触发点击事件');
});
var oWrap = $('<p id="wrap"></p>');
$(document.body).append(oWrap);
var op = $('<p id="test">点我</p>');
$("#wrap").append(op);
} );
</script>
</head>
<body>
</body>
</html>Verwandte Empfehlungen:
Lösung für das ungültige ID-Bindungsereignis im JQuery-Appaend-Element Detaillierte Erläuterung des Problems der JQuery-Bindungsereignisse in der SchleifeDetaillierte Erläuterung der Verwendung der JavaScript-Bindungsereignisfunktion mit Ereignisattributen
Das obige ist der detaillierte Inhalt vonWas sollten Sie beachten, wenn Sie on zum Binden von Ereignissen in jQuery verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
