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

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