Enregistrer le code JavaScript dans la liste déroulante imbriquée dynamique

Question

J'ai un fichier JQM pliable qui est créé dynamiquement en cliquant sur le bouton. Je veux créer des collapsibles imbriquées dynamiquement pour lesquelles j'ai besoin d'enregistrer un javascript comme nous le faisons pour les contrôles html normaux en passant "this" qui est l'objet de contrôle.

for (var i = 0; i < arrList.length; i++) { 
      var arr = arrList[i].split('#'); 
      var Programme = arr[0]; 
      var arr2 = arr[1].split('><'); 
      var revenue = arr2[0]; 
      var time = arr2[1]; 

     // Append a new collapsible and store it into a JQuery object     
     $('#tdDynamic').append('<div id="collapsible_PG' + i + '" 
            data-role="collapsible" 
            data-collapsed="true" 
            data-theme="e" 
            data-content-theme="c"' 
            + ' onclick="onexpand(this);"></div>'); 

     // Append the list header and store it into a JQuery object 
     var collapsible = $('#collapsible_PG' + i); 

     collapsible.append('<h3 id="h3Text_PG' + i + '">' 
          + Programme + '&nbsp;&nbsp;&nbsp;' 
          + time + '&nbsp;&nbsp;&nbsp;' 
          + revenue + '</h3>'); 
//var h3Text = $('#h3Text' + i); 
//collapsible.bind('expand', function() { onexpand('#h3Text' + i); }); 
          collapsible.collapsible(); 
    } 

Est-ce que cela est possible comme onclick="onexpand(this);"?

sur CLICK J'ai essayé d'utiliser

collapsible.bind('expand', function() { onexpand(collapsible); }); 

mais cela donne juste le dernier id de tous les onclick générés dynamiquement pliables. Donc même lorsque je clique sur le premier repliable, il me montre le dernier qui était lié. Je suppose que la liaison est écrasée avec chaque nouveau collapasible ajouté dans la boucle, c'est pourquoi je cherchais quelque chose comme onclick = 'funcName (this)'. Je suis nouveau à JQM s'il vous plaît pointez-moi dans la bonne direction.

J'ai référé diverses questions SO, mais je n'ai rien trouvé qui puisse m'aider.

I reffred to this jsfiddle example.

Answer 1

Comme le commentaire était utile et vous avez probablement trouvé la solution sur cette base, je mets comme une réponse.

Vous pouvez attacher le gestionnaire d'événements click à l'extérieur du bloc où vous générez collapsible. De cette façon, tous les éléments futurs seront automatiquement couverts:

-à-dire:

// Select all divs which id starts with... 
$("div[id^='collapsible_PG']").on("click", function() { 
    // $(this) here will refer to the exactly element clicked 
    onexpand($(this)); 
}); 

$('#tdDynamic').append('<div id="collapsible_PG' + i + '" 
    data-role="collapsible" 
    data-collapsed="true" 
    data-theme="e" 
    data-content-theme="c"></div>');