Comment gérer l'échec de jQuery à déclencher des événements de liaison lors de l'ajout d'éléments-js tutoriel-php.cn

Comment gérer l'échec de jQuery à déclencher des événements de liaison lors de l'ajout d'éléments

php中世界最好的语言

Libérer： 2018-03-15 11:38:39

original

1694 Les gens l'ont consulté

Cette fois, je vais vous montrer comment gérer l'échec de jQuery à déclencher l' événement de liaison lors de l'ajout d'éléments, et quelles précautions sont là pour résoudre le problème de l'échec de déclenchement de jQuery l'événement de liaison lors de l'ajout d'éléments, ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai récemment rencontré un problème, c'est-à-dire qu'après avoir utilisé jquery pour ajouter dynamiquement des éléments, j'ai découvert que les éléments ajoutés dynamiquement ne pouvaient pas déclencher d'événements. Plus tard, j'ai vérifié certaines informations sur Internet et j'ai découvert que c'était ainsi que cela devait être traité :

Tout d'abord, laissez-moi vous montrer le code qui a provoqué l'erreur :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" >
  <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
//这里是动态添加元素
      $(".add").click(function(){
        var btn = $("<button class=&#39;newBtn btn btn-default&#39;>新按钮</button>");
        $("body").append(btn);
      })<br><br>//这里是为添加的元素添加事件
      $(".newBtn").click(function(){
        alert("这里是新添加的元素触发的事件");
      })
    })
  </script>
</head>
<body>
<button class=" add btn btn-default">添加按钮</button>
</body>
</html>

Copier après la connexion

Je vais donnez-vous ma solution

Méthode 1 : lier les événements en direct (les événements en direct ne sont pris en charge que sous jquery 1.9, pas dans les versions supérieures).

$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
  alert('这里是动态元素添加的事件');
})

Copier après la connexion

Méthode 2 : Utiliser la liaison d'événement on() ($(ParentEle).on("click",".thisEle",function(){})

$("body").on("click", ".newBtn", function() {
   alert('这里是动态元素添加的事件');
});
//这里的ParentEle是 thisEle的父辈元素或者祖先元素，ParentEle可以是document，也可以是body等。
//注意：如果此时调用的函数是外部定义好的函数，那在调用的时候不要加()，不然会跳过点击事件直接触发函数

Copier après la connexion

$("body").on("click", ".newBtn",aa );
function aa(){
    alert('这里是动态元素添加的事件');
}

Copier après la connexion

ok, problème résolu, continuer à grimper dans la fosse .

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 :

Que faire si la fonction de déclenchement jquery ne peut pas déclencher la balise a

Comment utiliser jquer pour implémenter l'échange de lignes et de colonnes de tableau

soumission de validation de formulaire de jquery

sélection de case à cocher de jQuery et obtenir la valeur

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!