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

Helloooo

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 :

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

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 :

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

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 HTML :

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

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

et une fonction :

Code :

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

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

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 :

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

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 :

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

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 :

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

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 :

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

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

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)