Jquery sur clic ne fonctionne pas après l'événement de modification sur selectmenu

Je tente de construire une page dans laquelle les éléments de liste sont ajoutés dynamiquement sous un élément "ul".Jquery sur clic ne fonctionne pas après l'événement de modification sur selectmenu

Lorsqu'un élément de la liste est cliqué, il ouvrira un sélectionnez Menu (plugin jquery)
utilisateur sélectionne une des valeurs, après quoi le sélectionnez Menu doit fermer (cacher)
La valeur sélectionnée de menu est peuplé dans le texte de l'élément de la liste qui a été cliqué pour faire apparaître le menu select.
Après la liste texte de l'élément est rempli, ajouter dynamiquement un autre élément de la liste en dessous
L'utilisateur doit maintenant être en mesure de répéter des étapes 1 à 4.

Je suis en mesure de faire les étapes 1 à 4 première temps mais après que le menu select est masqué, les clics sur un élément de liste nouvellement ajouté ou sur l'un des éléments listés précédemment ne sont pas reconnus. Je ne suis pas capable de comprendre, où tout ce que je me trompe. Voici le code html et jquery. Tous les pointeurs seront appréciés

HTML

<body> 
<div class="container"> 
    <ul class="tree"> 
     <li class="connection" id="connection1">-------------</li> 
    </ul> 
</div> 


</body> 
<div class="selection"> 
    <select id="my-select" name="character" multiple="multiple"> 
     <optgroup label="The Griffins"> 
      <option value="Peter">Peter Griffin</option> 
      <option value="Lois">Lois Griffin</option> 
      <option value="Chris">Chris Griffin</option> 
      <option value="Meg">Meg Griffin</option> 
      <option value="Stewie">Stewie Griffin</option> 
     </optgroup> 

     <optgroup label="Peter's Friends"> 
      <option value="Cleveland">Cleveland Brown</option> 
      <option value="Joe">Joe Swanson</option> 
      <option value="Quagmire">Glenn Quagmire</option> 
     </optgroup> 

     <option value="Evil Monkey">Evil Monkey</option> 
    </select> 
</div>

Javascript pour la fonction clic

var i = 1; 

$('body').on("click", ".connection", function() { 
    var connectionid = $(this).attr('id'); 
    $("#my-select").selectmenu({ 
     change: function (event, data) { 
      var selectedText = $(this).val(); 
      $("#connection" + i).text(selectedText); 
      $(".selection").hide(); 
      i++; 
      var id = "connection" + i; 
      $("#" + connectionid).append("<li class='connection' id=" + id + ">-------------</li> ") 
     } 
    }) 
});

Source

2017-02-07 sbhas

j'ai pu trouver la réponse moi-même. "on" n'a pas été défini correctement

$('.container').on('click', 'li',function (e) { 
    //alert("hello"); 
    var connectionid = $(this).attr('id'); 
    $(".selection").show(); 
    $("#my-select").selectmenu({ 
     change: function(event,data){ 
      //alert("hello2"); 
      var selectedText = $(this).val(); 
      $("#connection" + i).text(selectedText); 
      $(".selection").hide(); 
      i++; 
      var id = "connection" + i; 
      $("#" + connectionid).append("<li class='connection' id=" + id + ">-------------</li> ") 
     } 
    }); 

});

Source

2017-02-08 14:59:31 sbhas

Jquery sur clic ne fonctionne pas après l'événement de modification sur selectmenu

Répondre

Questions connexes