Comment utiliser et cliquer dans jquery-js tutoriel-php.cn

Comment utiliser et cliquer dans jquery

php中世界最好的语言

Libérer： 2018-03-15 10:31:58

original

4262 Les gens l'ont consulté

Cette fois, je vais vous expliquer comment utiliser on et cliquer dans jquery Quelles sont les précautions pour utiliser on et cliquer dans jquery. Ce qui suit est un cas pratique Get. levez-vous et jetez un oeil.

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

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 remplacé par Supprimer . 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la forme de l'arbre dans layui sur le passage de valeur

Les données de requête Ajax rencontreront Quels problèmes

jquery se rend compte qu'après avoir cliqué sur un lien, le lien se transforme en un effet de couleur personnalisé

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser et cliquer dans jquery