Bonjour,
ton soucis semble venir du clonage de tes éléments.
Je te propose une autre vision de ton code
• Clonage au début d'éléments "vierge"
1 2 3 4
| // création des clones
var $type_aliment = $('#type_aliment-1').clone();
var $name_aliment = $('#name_aliment-1').clone();
var $qte_aliment = $('#qte-1').clone(); |
• Mise en place du chainage pour qu'il soit tout de suite opérationnel
1 2
| // chainage des SELECT
$('#name_aliment-1').chained('#type_aliment-1'); |
• Sur le click de ton bouton,
- création des nouveaux éléments mais en clonant les clones
- récupérations du nombre déjà présent pour incrémentation des ID et NAME
- affectation de ID et NAME
- ajout des éléments aux conteneurs
- chainage des SELECTs
...c'est très peu différent de ce que tu as fait mais avec une autre vision
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| // récup. nombre éléments
var nbr = $('[id ^="type_aliment"]').length;
// incrémente le compteur
nbr++;
// affectation des IDs et NAMEs
$type.prop({
'id': 'type_aliment-' + nbr,
'name': 'type_aliment-' + nbr
});
$name.prop({
'id': 'name_aliment-' + nbr,
'name': 'name_aliment-' + nbr
});
$qte.prop({
'id': 'qte-' + nbr,
'name': 'qte-' + nbr
});
// ajout des éléments
$('#global-type-aliment').append($type);
$('#global-name-aliment').append($name);
$('#global-qte').append($qte);
// chainage des SELECT
$($name).chained($type); |
• Au final ta fonction ressemble à cela
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| $(document).ready(function() {
// création des clones
var $type_aliment = $('#type_aliment-1').clone();
var $name_aliment = $('#name_aliment-1').clone();
var $qte_aliment = $('#qte-1').clone();
// chainage des SELECT
$('#name_aliment-1').chained('#type_aliment-1');
// action sur clic du bouton
$('#add_aliment').on('click', function() {
// clonage des clones
var $type = $type_aliment.clone();
var $name = $name_aliment.clone();
var $qte = $qte_aliment.clone();
// récup. nombre éléments
var nbr = $('[id ^="type_aliment"]').length;
// incrémente le compteur
nbr++;
// affectation des IDs et NAMEs
$type.prop({
'id': 'type_aliment-' + nbr,
'name': 'type_aliment-' + nbr
});
$name.prop({
'id': 'name_aliment-' + nbr,
'name': 'name_aliment-' + nbr
});
$qte.prop({
'id': 'qte-' + nbr,
'name': 'qte-' + nbr
});
// ajout des éléments
$('#global-type-aliment').append($type);
$('#global-name-aliment').append($name);
$('#global-qte').append($qte);
// chainage des SELECT
$($name).chained($type);
});
}); |
• Tu pourrais même prévoir :
- l'activation disabled/enabled de ton champ quantité
- la suppression des IDs qui ne te servent en fait à rien
- mettre les NAMEs sous forme type_aliment[], name_aliment[] et quantite_aliment[] ce qui te permettrais coté serveur de récupérer des tableaux de données et d'alléger ton code
Partager