JQuery et élément de page HTML ajouté via javascript

Helloooo :D

Sur une page php, j'ai un tableau html dont le nombre de ligne est défini par un paramètre de configuration que je stocke dans une base de donnée.
Plusieurs champs par lignes, je les remplis au fur et à mesure d'un choix de titres (le tableau me sert à faire une playlist avec titre, bpm, durée et style).

Pour le champs de titre, j'utilise une fonction que j'avais dégottée il y a longtemps, en JQuery, et qui est un "searchable dropdown menu", autrement dit, un input type text mais qui agit comme un menu déroulant <select> dont les choix dépendent de ce que je saisis dans le champ (en gros, si je tape "toto", les choix seront tous les titres contenant "toto").

Cette fonction est à utiliser en mettant l'intégration des fichiers JQuery et le script lui même à la fin de page :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<link rel="stylesheet" href="./js/jquery-ui.min.css" type="text/css" /> <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./js/jquery-ui.min.js"></script>   <script type="text/javascript"> $(function() { $(".autotitre").autocomplete({ source: "suggtitre.php", minLength: 1 }); }); </script>

---

et en ajoutant ceci dans l'input :

Code:

---

class='autotitre'

---

Jusque là , pas de souci.

Il se peut que j'ai à rajouter une ou plusieurs lignes donc ca aussi c'est bon, via un bouton en bas du tableau :

Code:

---

<input style="width:200px" type="button" value="Ajouter" onclick="ajouterligne()">

---

et une fonction :

Code:

---

1 2 3 4 5

function ajouterligne(){ nblignes++; playlist_table.insertAdjacentHTML('beforeend', '<tr><td><input type="text" name="titre'+nblignes+'" id="titre'+nblignes+'" value="" placeholder="Titre" class="autotitre"></td></tr>'); }

---

Je n'ai mis ici que l'input qui nous intéresse, volontairement. $nblignes sert pour incrémenter l'identifiant des champs pour le ramassage des valeurs à la validation du formulaire.

Seulement voilà, quand j'ajoute une ligne, le script de recherche précédemment décrit ne fonctionne pas. D'autres scripts qui eux sont déclenchés par des onclick etc etc, fonctionnent, mais la class 'autotitre' non . Je pense que c'est parce que lorsque la page a été chargée initialement la ligne n'existait pas et donc JQuery ne la connait pas.
Il faudrait pouvoir relancer un scan de la page en fin de fonction d'ajout de ligne, pour prendre en compte les nouveaux éléments.

Mais je n'ai aucune idée de 1) si c'est faisable, 2) comment faire :(

Si quelqu'un a une idée pour un petit canard :D

MErkouin !
Mes recherches effectuées ne m'avaient données aucun résultat (j'avoue cependant que c 'est une demande un peu tordue lol)

il faut relancer l'init du plugin après l'ajout dynamique ...

une autre possibilité serait de faire un delelgate sur le focusin du parent

Code:

---

1 2 3 4 5

$('[conteneurParent]').on('focusin', '.autotitre', function(){ $(this).autocomplete({ .../...   }); });

---

Merci pour cette réponse rapide :)

J'ai tenté le réinit du plugin en ajoutant ceci (sans trop savoir, j'ai glané cette commande sur internet) à la fin de la fonction d'ajout de ligne de tableau :

Code:

---

initializePlugins();

---

Mais rien de mieux.

J'ai tenté en adaptant le script en mettant playlist_table (id du tableau html) en tant que conteneur :

Code:

---

1 2 3 4 5 6

$('[playlist_table]').on('focusin', '.autotitre', function(){ $(this).autocomplete({ source: "suggtitre.php", minLength: 1 }); });

---

Mais malheureusement, pas de résultat :(

Par quelle méthode je peux réinitialiser le plugin ?

Merki :)

Edit :
Un peu au culot, j'ai ajouté ceci à la fin de la fonction d'ajout :

Code:

---

1 2 3 4

$(".autotitre").autocomplete({ source: "suggtitre.php", minLength: 1 });

---

Je ne suis pas certain que ce soit la solution la plus propre mais ça a l'air de fonctionner.

Si il y a plus propre je reste preneur, sinon je mettrais le sujet en résolute :P

Citation:

---

Envoyé par Couin

J'ai tenté en adaptant le script en mettant playlist_table (id du tableau html) en tant que conteneur

---

@SpaceFrog t'a dit ce qu'il faut faire.

Il faut mettre le id de la table précédé d'un diez # et pas les crochets :

Code:

---

1 2	$('#playlist_table').on(...)

---

Et tu n'as pas besoin de réinitialiser le plugin à chaque fois qu'un nouvel élément .autotitre s'ajoute au DOM, parce que l'événement est attaché (par délégation) à tous les .autotitre

Hello,

Merci , en effet, cela marche en appliquant ta correction :)

Et plus besoin de remettre le script comme je l’avais mis à la fin de la fonction d'ajout.

Je crois que je peux donc passer en Résolu :)

Merci et bon OuiK ! (bon j'ouvre un autre sujet car un autre petit souci lol)