suchen

Heim  >  Artikel  >  Web-Frontend  >  Was sind die Unterschiede zwischen on und click in jquery?

Was sind die Unterschiede zwischen on und click in jquery?

亚连
亚连Original
2018-06-11 17:46:412254Durchsuche

Im Folgenden werde ich Ihnen eine detaillierte Erklärung des Unterschieds zwischen on und click basierend auf jquery geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Wenn Sie jQuery zum Schreiben von js verwenden, verwenden einige on zum Schreiben von Verhaltensfunktionen und andere verwenden click. Es ist wichtig, den Unterschied zwischen den beiden zu verstehen.

Das Folgende ist der HTML-Code, der zum Testen des Unterschieds zwischen den beiden verwendet wird. Die 

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <p>
  <h1>展示jQuery中on()和click()的区别</h1>
 </p>
 <p>
  <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
 </p>
 <p class="test">
  <button class="new" id="newon">NewOn</button> 
  <button class="new" id="newclick">NewClick</button>
  <ul class="li"> 
   <li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
   <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
  </ul> 
 </p>
</body>
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script src="/static/js/test.js"></script>
</html>

js-Datei lautet wie folgt: 

$("#newclick").click(function(){ 
 $(".li").append(&#39;<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>&#39;); 
});
$("#newon").click(function(){ 
 $(".li").append(&#39;<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>&#39;); 
});
$(".delete").click(function(){ 
 $(this).parent().remove(); 
}); 

$(".li").on(&#39;click&#39;, ".deleteon", function(){
 $(this).parent().remove(); 
})
$(".deleteclick").click(function(){ 
 $(this).parent().remove(); 
});

Nachdem die Seite geladen ist, klicken Sie auf die Schaltflächen NewOn und NewClick. Die Seite wird wie unten dargestellt angezeigt.

Phänomene:

Das ursprüngliche HTML-Element wird gelöscht, wenn Sie auf die Schaltfläche „Löschen“ dahinter klicken . Dynamisch hinzugefügte HTML-Elemente können mit der Methode „click()“ nicht durch Klicken auf die Schaltfläche „Löschen“ gelöscht werden; sie können mit der Methode „On()“ gelöscht werden.

Ursache:

element.click() unterstützt keine Bindungsereignisse an dynamische Elemente oder Stile. Unterstützung für das Binden von Ereignissen an dynamische Elemente ist .live() und .on(). Live wird nach jQquery 1.7 nicht mehr empfohlen. Bitte beachten Sie bei der Verwendung von .on(), dass das Element vor on beim Laden der Seite im DOM vorhanden sein muss.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So gehen Sie mit Anzeigeproblemen vor dem Vue-Rendering um (ausführliches Tutorial)

Crawling in Node.js Douban-Daten (ausführliches Tutorial)

Über die Ladereihenfolge von Rendering und Plug-Ins in Vue (ausführliches Tutorial)

Erreicht durch AjaxUpLoad.js-Code Beispiel für das Hochladen von Dateien (ausführliches Tutorial)

Detaillierte Einführung in die Verwendung und Funktionen der JsChart-Komponente

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen on und click in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Parameter der Methode $.ajax()Nächster Artikel：Detaillierte Erläuterung der Parameter der Methode $.ajax()

In Verbindung stehende Artikel

Mehr sehen