Heim > Artikel > Web-Frontend > So verwenden Sie on und klicken in jquery

So verwenden Sie on und klicken in jquery

php中世界最好的语言Original: 2018-03-15 10:31:584237Durchsuche

Dieses Mal erkläre ich Ihnen, wie Sie jquery verwenden aufstehen und einen Blick darauf werfen.

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.

js-Datei lautet wie folgt:

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

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

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

Phänomene: Das ursprüngliche HTML-Element wird durch Löschen

. 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 jQquery1.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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung der Baumform in Laui zur Wertübergabe

Ajax-Anfragedaten werden auf welche Probleme stoßen

jquery erkennt, dass sich der Link nach dem Klicken auf einen Link in einen benutzerdefinierten Farbeffekt ändert

Das obige ist der detaillierte Inhalt vonSo verwenden Sie on und klicken 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：Ausführliche Erklärung der Baumform in Laui zur WertübergabeNächster Artikel：Ausführliche Erklärung der Baumform in Laui zur Wertübergabe

In Verbindung stehende Artikel

Mehr sehen