Discussion :

[chewing-gum]

Bonjour,

dans le cadre d'un projet, je dois réaliser un formulaire avec tout un tas de fonctions dynamiques / ergonomiques, avec JQuery.

Problème : J'ai créé une fonction pour ajouter des champs <input type="text" ... /> dynamiquement. il suffit que l'utilisateur clique sur un bouton pour que le <input> soit généré. Voila mon morceau de code (celui-ci fonctionne) :

Code :

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

1
2
3
4
            // Ajoute une ligne
            $('p#addLine').live('click', function() {
                var myElement = $('<tr id=' + i + '> <td>' + i + '<td> <input class="articles" type="text" name="idArticle-' + i + '" /> </td> <td> <input type="text" name="qte-' + i + '" /> </td> <td id="delete-' + i + '" class="delete">Supprimer ' + i + '</td> </tr>').appendTo('table');
            });

Note : la variable "i" est définie un peu plus tôt dans mon code.

Mais... Les <input> possèdent aussi une fonction d'autocomplétion. Cette dernière fonctionnalité ne marche pas pour les <input> qui sont ajoutés dynamiquement. Voila mon code d'autocomplétion :

Code :

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

1
2
3
4
5
6
7
8
9
10
            // Autocomplétion idArticle
            $('.articles').autocomplete ({
                source: '<%= Url.Action("GetArticles") %>',
                datatype: 'json',
                minLength: 2,
                select: function(event, ui) {
                    // Traitement à effectuer
                },
                scroll: true
            });

Les champs "non générés dynamiquement" par JQuery n'ont pas d'autocomplétion.
J'imagine peut-être qu'il faut effectuer une sorte de "refresh" pour que mes <input> générés soient pris en compte ?

[Benjamin Delespierre]

La meilleure chose à faire serait sans doute s'équiper d'une fonction d'initialisation capable de prendre un contexte en paramètre de façon a pouvoir initialiser les éléments ajoutés dynamiquement.

Ex:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function _init () {
  var context = arguments[0] || document;
 
  $('.autocomplete', context).autocomplete(...);
}
 
$(function () {
 
  $('#add').live('click', function() {
     var html = $('<div>...</div>');
     _init( $('anything').after(html) );
  });
 
  _init();
});

[SpaceFrog]

voir aussi on() et delegate() ...
live() est deprecié depuis jQuery 1.7

[BlindeKinder]

bonjour,
je suis en apprentissage de jQuery, que j'apprécie beaucoup!
Et j'ai le même souci (je crois)...
J'ai des <span class="toto"> générés au chargement, qui déclenchent des fonctions lorsqu'ils sont cliqués:

Code :

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

$('.toto').click(function...

pas de souci, tout fonctionne... Mais je génère ensuite d'autres span.toto (.append), qui eux ne sont évidemment pas 'parsés' au chargement, et donc l'action ne se déclenche pas au clic!?!
Je ne suis pas sûr de comprendre la fonction _init(). Il n'y a pas plus simple?

[SpaceFrog]

toutes les reponses sont au dessus ...

[Benjamin Delespierre]

Je ne suis pas sûr de comprendre la fonction _init(). Il n'y a pas plus simple?

Tu veux dire plus simple que réunir toutes les instructions d’initialisation dans une même fonction ? Non.