Maison >interface Web >js tutoriel >Comment résoudre le problème selon lequel les éléments ajoutés dynamiquement ne peuvent pas déclencher d'événements de liaison à l'aide de jQuery

Comment résoudre le problème selon lequel les éléments ajoutés dynamiquement ne peuvent pas déclencher d'événements de liaison à l'aide de jQuery

亚连original: 2018-06-14 11:38:503419parcourir

Cet article présente principalement la solution au problème selon lequel les éléments ajoutés dynamiquement par jQuery ne peuvent pas déclencher d'événements de liaison. Il analyse les raisons et les solutions associées pour les éléments ajoutés dynamiquement qui ne peuvent pas déclencher d'événements de liaison sous la forme d'exemples auxquels les amis dans le besoin peuvent se référer. it

L'exemple de cet article décrit la solution au problème selon lequel les éléments jQuery ajoutés dynamiquement ne peuvent pas déclencher d'événements de liaison. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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 constaté 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 découvert que voici comment cela devait être traité :

Parlons d'abord de mon code d'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>

Je vais vous donner ma solution

Méthode 1 : lier les événements en direct (les événements en direct ne sont pris en charge que sous jquery1.9, non pris en charge par les versions supérieures).

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

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

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

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

Ce qui précède est ce que j'ai compilé pour tout le monde , j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter une table à l'aide de jQuery+CSS

Utilisez le module http pour envoyer des requêtes via nodejs (détail tutoriel)

Comment implémenter l'internationalisation à l'aide d'Angular (tutoriel détaillé)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le plug-in JS CookieArticle suivant：Comment utiliser le plug-in JS Cookie

Articles Liés

Voir plus