So verwenden Sie on und klicken in jquery-js-Tutorial-php.cn

So verwenden Sie on und klicken in jquery

php中世界最好的语言

Freigeben： 2018-03-15 10:31:58

Original

4277 Leute haben es durchsucht

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>

Nach dem Login kopieren

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(); 
});

Nach dem Login kopieren

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!