Multiples JSCalendar indépendants

[hsmr]

Bonsoir et Joyeux Noël!

Je voudrais utiliser plusieurs JSCalendar sur un site web.
Un bout de code javascript (ci-dessous) permet d'ajouter dynamiquement un bloc contenant un champ de type 'input' pour la date et un autre de type 'input' pour le contenu. Entre les deux, un bouton permettant d'afficher le calendrier sous forme de popup et de pouvoir sélectionner la date.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
      var counter=1;
      $('.ajouter').click(function(){
         var newDetailBoxDiv = $(document.createElement('div')).attr("id", 'DetailBoxDiv' + counter);
         newDetailBoxDiv.html('<div class="date">' +
                              '	Date&nbsp;&nbsp;<input type="text" name="date" id="calendar-field[' + counter + ']" \/>' +
                              '	<button id="calendar-trigger[' + counter + ']">...<\/button>' +
                              '	<script>' +
                              '		Calendar.setup({inputField:"calendar-field[' + counter + ']",trigger:"calendar-trigger[' + counter + ']",onSelect   : function() { this.hide() }});' +
                              '	<\/script>' +
                              '<\/div>' +
                              '<div class="contenu">Contenu <input type="text" class="texte" name="contenu" \/><\/div>');
 
         newDetailBoxDiv.appendTo("#detail_programme");
	 counter++;
      });
</script>

Seulement voilà, seul le premier bloc (écrit en dur dans ma page php) fonctionne. Aucun des blocs suivants ajoutés dynamiquement ne fonctionnent. Lorsque je clique sur le bouton destiné à afficher le calendrier, ce dernier ne s'affiche pas et l'erreur javascript que j'ai est la suivante :

Code :

b is null

Souriez-vous ce qu'il faut faire pour avoir de multiples JSCalendar indépendants ?
Merci

[SpaceFrog]

Regarde plutot du coté de l'attribution d'evenements sur les objets créés dynamiquement => on() ou live()

[hsmr]

Bonsoir SpaceFrog!
Merci pour ta réponse. Je pense avoir saisi l'utilisation de "live".
J'ai donc remplacé le bout de code javascript

Code :

1
2
3
'<script>' +
'     Calendar.setup({inputField:"calendar-field[' + counter + ']",trigger:"calendar-trigger[' + counter + ']",onSelect   : function() { this.hide() }});' +
'<\/script>' +

par ceci

Code :

1
2
3
'<script>' +
'     $("button").live("click", "button", function() {Calendar.setup({inputField:"calendar-field[' + counter + ']",trigger:"calendar-trigger[' + counter + ']",onSelect   : function() { this.hide() }});})' +
'<\/script>' +

C'est presque ça, mais il faut que je clique 2 fois sur l'élément "button" pour que l'action désirée se fasse.
J'ai essayé de remplacer "live" par "on", mais j'ai le message d'erreur suivant dans la console java

Code :

$("button").on is not a function

Une piste supplémentaire serait la bienvenue. Merci.

[SpaceFrog]

Quelle version de jquery ??? on() est récent

[Logarithmix]

Sinon tu peux aussi te tourner vers la fonction delegate(), c'est ce que j'ai utilisé pour la génération de formulaires au clic (j'utilise des datepicker dans mes formulaires), et ça marche bien.
http://api.jquery.com/delegate/