Discussion :

[patrick754]

Bonjour à tous
Je rencontre un soucis et je demande votre aide.

J'ai un accordion bootstrap auquel j'ajoute dynamiquement du contenu.
Une fois le contenu ajouté, le click qui devrait dérouler la liste ne marche pas. Je ne comprend pas d'ou vient le problème, je demande votre aide.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<li>
     <ul class="collapsible collapsible-accordion" id="menu">
		<li>
			<a class="collapsible-header waves-effect pl-2 arrow-r active"><strong>Item</strong><i class="fas fa-angle-down rotate-icon"></i></a>
			<div class="collapsible-body">
				<ul>
					<li><a class="pl-4">Item1</a></li>
					<li><a class="pl-4">Item2</a></li>
					<li><a class="pl-4">Item3</a></li>
				</ul>
			</div>
		</li>
	</ul>
</li>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function add_item(){			
		$("#menu").append('<li>'
			+'<a class="collapsible-header waves-effect pl-2 arrow-r">Autre<i class="fas fa-angle-down rotate-icon"></i></a>'
			+'<div class="collapsible-body">'
				+'<ul>'
					+'<li><a class="pl-4">Item1</a></li>'
					+'<li><a class="pl-4">Item2</a></li>'
				+'</ul>'
			+'</div>'
		+'</li>');
	};

Merci d'avance.

[Toufik83]

Bonjour,

Pour activer le click sur les éléments ajoutés dynamiquement, il faut passer par délégation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("#menu").on("click","li",function(){
   //le code ici...
});

Remarque : il est conseillé d'ajouter une class aux <li> aux lesquels tu veux attacher le click, vu qu'il y'a d'autres <li> à l'intérieur....

[patrick754]

Merci pour la reponse Toufik83
J'essai juste d'afficher le contenu de la liste. Ceci marche sur la première liste qui n'est pas généré dynamiquement mais pas sur les autres.

Merci

[Toufik83]

Essaies ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('#menu').on('click','.arrow-r',function(){
  if($(this).next('.collapsible-body').is(':visible')){
  	$(this).next('.collapsible-body').slideUp(300,function(){
          $(this).prev('.arrow-r').find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
        });
  }
  else {
       $(this).next('.collapsible-body').slideDown(300,function(){
         $(this).prev('.arrow-r').find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
      });
  }
});

[patrick754]

Merci Toufik83, ça marche.