Deux méthodes pour résoudre le problème selon lequel les nœuds d'éléments ajoutés dynamiquement ne peuvent pas déclencher d'événements dans jquery_jquery

Par exemple, lors de la création d'un ajax pour lire la liste des messages, il y a un bouton de réponse derrière chaque message avec la classe "répondre". Si vous utilisez $(".reply").click(function(){ // faire quelque chose... }), il est probable que l'événement click du bouton de réponse dans la liste chargée plus tard via ajax ne sera pas valide.

En faitLe moyen le plus simple est d'écrire onclick="" directement dans la balise, mais écrire de cette façon est en fait un peu bas. La meilleure façon est de le lier au tag. nom de classe Définit un événement de clic.

Il existe deux solutions au problème selon lequel les nœuds d'éléments ajoutés dynamiquement dans jquery ne peuvent pas déclencher d'événements , comme suit :

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 :

<p id="pLabel">新加一条</p>
<ul id="ulLabel">
 <li class="liLabel">aaa1</li>
 <li class="liLabel">aaa2</li>
 <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
 $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
</script>

Méthode 1 : Utiliser en direct

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.

La mise en œuvre est la suivante :

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

Méthode 2 : Utiliser sur

Vous pouvez 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 :

$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
 alert('OK')
});

Vous pouvez maintenant l'essayer pour voir si le problème a été résolu. J'espère que cet article pourra vraiment vous aider.