Quelles sont les différences entre on et click dans jquery ?-js tutoriel-php.cn

Quelles sont les différences entre on et click dans jquery ?

亚连

Libérer： 2018-06-11 17:46:41

original

2257 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous une explication détaillée de la différence entre on et click basé sur jquery. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Lorsque vous utilisez jQuery pour écrire du js, certains utilisent on pour écrire des fonctions comportementales, et certains utilisent click. Il est important de comprendre la différence entre les deux.

Ce qui suit est le code HTML utilisé pour tester la différence entre les deux.

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

Copier après la connexion

le fichier js est le suivant :

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

Copier après la connexion

Une fois la page chargée, cliquez sur les boutons NewOn et NewClick, la page est comme indiqué ci-dessous.

Phénomènes :

L'élément HTML d'origine sera supprimé si vous cliquez sur le bouton Supprimer derrière lui . Quant aux éléments HTML ajoutés dynamiquement, à l'aide de la méthode click(), ils ne peuvent pas être supprimés en cliquant sur le bouton Supprimer, ils peuvent être supprimés à l'aide de la méthode On() ;

Cause :

element.click() ne prend pas en charge la liaison d'événements à des éléments ou des styles dynamiques. La prise en charge de la liaison d'événements à des éléments dynamiques est .live() et .on(). Live n'est plus recommandé après jQquery 1.7. Lorsque vous utilisez .on(), veuillez noter que l'élément précédant on doit exister dans le DOM lorsque la page est chargée.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment gérer les problèmes d'affichage avant le rendu de la vue (tutoriel détaillé)

Exploration des données Node.js Douban (tutoriel détaillé)

À propos de l'ordre de chargement du rendu et des plug-ins dans Vue (tutoriel détaillé)

Réalisé via le code AjaxUpLoad.js exemple de téléchargement de fichier (tutoriel détaillé)

Introduction détaillée à l'utilisation et aux fonctions du composant JsChart

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!