Was sollten Sie beachten, wenn Sie on zum Binden von Ereignissen in jQuery verwenden?-js-Tutorial-php.cn

Was sollten Sie beachten, wenn Sie on zum Binden von Ereignissen in jQuery verwenden?

小云云

Freigeben： 2018-01-22 11:21:08

Original

1249 Leute haben es durchsucht

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 = $(&#39;<p id="test">点我</p>&#39;);
 $(document.body).append(op);
 $("#test").on(&#39;click&#39;, function(){
 alert(&#39;这是事件前添加的DOM,可以正常触发点击事件&#39;);
 });
 } );
</script>
</head>
<body>
 <p id="wrap"></p>
</body>
</html>

Nach dem Login kopieren

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(&#39;click&#39;, function(){
 alert(&#39;这是事件后添加的DOM,无法正常触发点击事件&#39;);
 });
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $(document.body).append(op);
 } );
</script>
</head>
<body>
 <p id="wrap"></p>
</body>
</html>

Nach dem Login kopieren

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 = $(&#39;<p id="wrap"></p>&#39;);
 $(document.body).append(oWrap);
 $("#wrap").on(&#39;click&#39;, $(&#39;#test&#39;), function(){
 alert(&#39;委托对象在事件前添加,可以正常触发点击事件&#39;);
 });
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $("#wrap").append(op);
 } );
</script>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

4. Das Delegate-Objekt wird nach dem Ereignis hinzugefügt und das Klickereignis kann nicht 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(){
 $("#wrap").on(&#39;click&#39;, $(&#39;#test&#39;), function(){
 alert(&#39;委托对象在事件后添加,无法正常触发点击事件&#39;);
 });
 var oWrap = $(&#39;<p id="wrap"></p>&#39;);
 $(document.body).append(oWrap);
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $("#wrap").append(op);
 } );
</script>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

5. Beschreibung: Bei der Arbeit wird das On-Event häufiger bei der Event-Bindung und Event-Delegation verwendet. Zumindest ist es mir häufiger begegnet dass das vorherige jQuery-Objekt zu einem Dokument wird, wie zum Beispiel: $(document on()), daher wird kein weiteres Beispiel angegeben.

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 Schleife

Detaillierte 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!