Ajout dynamique d'une ligne de table avec jquery, puis ajout automatique de la zone de sélection dans chaque nouvelle ligne

Question

Hé, les gars, j'ai essayé de demander cela hier mais je ne me suis pas expliqué clairement ou simplement assez.

J'ai un formulaire qui est configuré dans une table. L'utilisateur peut ajouter de nouvelles lignes (et plus d'éléments de formulaire) à sa guise. Chaque ligne de ce formulaire doit avoir sa propre boîte de sélection séparée et la boîte de sélection de sous-catégorie correspondante.

Donc fondamentalement ...

Nom | Sélectionnez
xxxxxx | [catégorie select] [sous-catégorie select]
xxxxxx | [catégorie select] [sous-catégorie select]
xxxxxx | [catégorie select] [sous-catégorie select]

Vous avez l'idée. :)

À l'heure actuelle, toutes les lignes ajoutées comportent une version tronquée du remplissage automatique.

Des suggestions sur la façon de le faire fonctionner?

Voici le code de remplissage automatique et d'ajouter le code de ligne de tableau que j'utilise, si cela aide le cerveau de tout le monde. Je ferai volontiers tout cas si quelqu'un a une réponse qui me semble meilleure.

Cookie gratuit pour une solution où je peux ajouter/supprimer des lignes de formulaire. :)

// auto populate select code 

$(document).ready(function(){ 
      $("#selectionresult").hide(); 

      $("#selection").change(function() { 
       $("#selectionresult").hide(); 
       $("#result").html("Retrieving ..."); 
       $.ajax({ 
        type: "POST", 
        data: "data=" + $(this).val(), 
        url: "include/javascript_population.php", 
        success: function(msg){ 
         if (msg != ""){ 
          $("#selectionresult").html(msg).show(); 
          $("#result").html(""); 
         } 
         else{ 
          $("#result").html("<em>No item result</em>"); 
         } 
        } 
       }); 
      }); 
     }); 


// add table row code 

    $(document).ready(function() { 
     $("#add").click(function() { 
      $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); 

      return false; 
     }); 
    }); 

    $("#mytable tbody>tr:last").each(function() {this.reset();});  

Toute aide serait totalement appréciée par tout le monde. Merci d'avance. :)

Answer 1

Vous risquez de rencontrer des problèmes de conflit d'événements et de liaison d'événements. Essayez d'utiliser live(); Vos événements ne sont plus liés lorsque vous clonez et déplacez des éléments DOM.

Essayez ceci:

$("#add").live("click", function() { 
$("#selection").live("change", function() { 

il semble aussi que vous pouvez dupliquer les ID. Vérifiez et assurez-vous que #selection, #selectionresult, etc ne sont pas clonés.