jQuery implémente l'obtention d'objets d'étiquette ajoutés dynamiquement-js tutoriel-php.cn

jQuery implémente l'obtention d'objets d'étiquette ajoutés dynamiquement

不言

Libérer： 2018-06-28 15:47:28

original

3774 Les gens l'ont consulté

Cet article présente principalement l'implémentation par jQuery de l'obtention d'objets de balises ajoutés dynamiquement, impliquant l'ajout dynamique d'éléments de page par jQuery, l'acquisition d'éléments et les techniques de fonctionnement liées à la réponse aux événements. Les amis dans le besoin peuvent se référer aux exemples de cet article

. Décrit l'implémentation de jQuery pour obtenir des objets balises ajoutés dynamiquement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

jquery ne peut pas ajouter directement des événements de clic à la page Web de manière dynamique et obtenir l'objet

De manière générale, js obtient des composants ajoutés dynamiquement automatiquement. Définissez l'ajout de l'attribut onclick à la balise pour réaliser l'appel. Il s'agit d'une méthode courante, comme suit :

méthode onclick pour obtenir

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button onclick=&#39;btnclick(this)&#39;>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  function btnclick(e) {
    console.log(e.textContent);//获取按钮文本
  }
</script>
</html>

Copier après la connexion

<. 🎜>

Maintenant, jquery a atteint la version 3 et le responsable a abandonné la méthode live. Il est recommandé d'utiliser la méthode on. La syntaxe est

$('选择器').on('click','选择类型',function (e){代码段}

jquery ne peut pas obtenir dynamiquement les balises de la page Web. Vous devez d'abord obtenir les balises fixes de la page Web, puis les autres balises à l'intérieur. Par conséquent, comme dans le code ci-dessus, le p dont l'identifiant est test est corrigé.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  $(&#39;#test&#39;).on(&#39;click&#39;,&#39;button&#39;,function (e){
    console.log($(this));
  });
</script>
</html>

Copier après la connexion

Écrire ainsi est très simple, et le bouton dans le type de sélection peut être davantage restreint, comme : bouton[class= test] , qui consiste à sélectionner le bouton créé dynamiquement avec le texte de la classe.

Pour obtenir des nombres pairs et impairs, ajoutez simplement "

", :even après le test, ou un nombre pair impair button[class=test]:even

L'exemple de code modifié est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态获取事件</title>
</head>
<body>
<p id="test"></p>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button class=test>按钮"+i+"</button></br>";
  }
  $(&#39;#test&#39;).html(html);
  $(&#39;#test&#39;).on(&#39;click&#39;,&#39;button[class=test]:even&#39;,function (e){
    console.log($(this));
  });
</script>
</html>

Copier après la connexion

Testez l'effet d'exécution de jquery en obtenant dynamiquement des objets impairs :

Ce qui précède est tout le contenu de ce article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

JQuery implémente la fonction de recherche de pages Web

JQuery implémente un plug-in d'effet carrousel automatique pour les images et texte

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!