Injection dynamique de code HTML et effet sur sur les class CSS (slider jQuery)

Bonjour à tous,

J'utilise un slider qui utilise JQuery
http://www.ndoherty.biz/demos/coda-slider/2.0/

Pour le bon fonctionnement du slider pour passer à la page suivante j'utilise le code

Code:

---

<a class="xtrig" href="#1" rel="coda-slider-3">Panel 1</a>

---

Donc comme ça ca marche sans problèlemes. J'imagine que lors de l'utilisation de la classe CSS "xtrig" le slider comprends qu'il faut passer à la page suivante.

Par contre quand j'injecte dynamiquement de l'HTML via javascript comme ça

Code:

---

container.innerHTML = '<a class="xtrig" href="#4" rel="coda-slider-1"><img src="questions/illu1reponse3V.png" width="" height="" class="" /></a>';

---

L'effet ne fonctionne plus sur le slider. Pourquoi ?

J'imagine que dès que le code apparait après le load ca ne fonctionne plus.

Comment faire pour conserver l'effet ? Sinon je pourrais précharger le lien et le désactiver jusqu'à ce que j'injecte le nouveau code HTML, mais comment faire ?

Cordialement
yodark

C'est effectivement un problème connu de JavaScript : il est assez mauvais pour prévoir ce qui va arriver sur la page dans le futur :aie:

Plus sérieusement, le fonctionnement est le suivant : lorsque le script est lancé, il récupère les éléments dont il a besoin et leur affecte un comportement, en revanche, il ne peut pas affecter un comportement à des éléments qui n'existent pas encore !
Eventuellement, tu peux essayer d'utiliser la méthode live() de jQuery, sinon, relancer le script à chaque ajout d'éléments.

Citation:

---

relancer le script à chaque ajout d'éléments.

---

C'est justement la que je coince un peu. Comment relancer le script ? Vu que je ne suis pas un expert JS je vois pas trop comment faire.

J'ai essayé de reprendre l'initialisation

Code:

---

$('#coda-slider-1').codaSlider();

---

Mais du coup tout s'éfface quand je fait ça.

Pour la fonction live comment l'utiliser dans ce cas la ?