Comment résoudre le problème selon lequel jQuery ajax ajoutant dynamiquement des nœuds ne peut pas déclencher des événements de clic

Lors de l'écriture en ajax pour charger des données, j'ai constaté que l'élément de nœud de démonstration ajouté plus tard avait perdu l'événement de clic précédent. Comment résoudre ce problème ? L'éditeur ci-dessous vous apporte une solution au problème selon lequel les nœuds ajoutés dynamiquement par jQuery ajax ne peuvent pas déclencher d'événements de clic. Jetons un coup d'œil. J'espère que cela pourra vous aider.

Lors de l'écriture en ajax pour charger des données, j'ai constaté que l'élément de nœud de démonstration ajouté plus tard avait perdu l'événement de clic précédent. Pourquoi l'événement click échoue-t-il et comment devons-nous le résoudre ?

En fait, le moyen le plus simple est d'écrire onclick="" directement dans la balise, mais écrire de cette façon est en fait un peu bas. est de donner Le nom de la classe lie un événement de clic.

Deux solutions au problème selon lequel les nœuds ajoutés dynamiquement par jQuery ajax ne peuvent pas déclencher d'événements. Afin d'obtenir un meilleur effet de démonstration, supposons qu'il y ait du code avec la structure suivante sous le corps d'une page :

 <ul id="demo">
  <li class="demo1">a1</li>
  <li class="demo1">a2</li>
  <li class="demo1">a3</li>
 </ul> 
 <script type="text/javascript">
 $("#demo").click(function(){
  $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素
 });
 </script>

Méthode 1 : Utiliser live :

La fonction live() liera un ou plusieurs gestionnaires d'événements à l'élément sélectionné et spécifiera les fonctions à exécuter lorsque ces événements se produisent. La fonction live() est appliquée aux éléments actuels et futurs correspondant au sélecteur. Par exemple, des éléments créés dynamiquement via des scripts.

est implémenté comme suit :

$('.demo1').live('click', function(){
 alert('OK');
});

Méthode 2 : Utiliser sur :

peut lier des événements via la méthode on, qui peut être liée à son parent ou à son corps, L'implémentation est la suivante :

$("#demo").on('click','.demol',function(){
 alert('OK')
});

Grâce aux deux méthodes ci-dessus, vous pouvez résoudre le problème de jQuery ajax en ajoutant dynamiquement des nœuds qui ne peuvent pas déclencher d'événements de clic. Maintenant que vous connaissez la méthode, essayez-la rapidement.

Recommandations associées :

JQuery simule les événements de clic et déclenche automatiquement les événements

js simule les événements de clic

Explication détaillée des erreurs courantes dans js en ajoutant dynamiquement des événements de clic

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!