Question clone jQuery (ensembles de saisie de formulaires de clonage)

Question

Je crée un formulaire de création de quiz qui nécessite le clonage de sections du formulaire.

see jsFiddle code example here

Mes ennuis viennent avec l'ajout d'un nouvel ensemble de champs d'interrogation. Lorsque je clique sur le bouton "AJOUTER UNE AUTRE QUESTION", il duplique plus d'un champ de réponse (si la première réponse a plus d'un champ de réponse), et le bouton "AJOUTER UNE AUTRE REPONSE" cloné ne fonctionne pas.

Une aide avec ceci serait grandement appréciée!

merci.

Answer 1

Je recommande deux choses:

Vous pouvez créer une copie du code HTML quand il est vide - de cette façon vous vous éviter d'avoir à cloner quelque chose avec des valeurs déjà et avoir besoin de les effacer. Clone juste le vide que tu as déjà.

Vous avez également défini live sur la question, mais c'est le bouton "Ajouter une réponse" que vous souhaitez utiliser en direct. Live définira les gestionnaires pour tout ce qui est ajouté au DOM (ce que vous faites). C'est la raison pour laquelle chaque bouton "Ajouter une réponse", sauf le premier, ne fonctionne pas.

var emptyQ = $("li.question").clone(), 
    emptyA = $("li.answer").clone(); 


$("#addQuestion").live('click', function(e) { 
    e.preventDefault(); 
    $('#questioncontainer').append(emptyQ.clone()); 

}); 

$(".addAnswer").live('click', function(e) { 
    e.preventDefault(); 
    $(this).parent().find(".answerContainer").append(emptyA.clone()); 
}); 

Exemple de travail: http://jsfiddle.net/jonathon/Sd9Ag/

J'utilise $(this).parent() pour obtenir le conteneur question/réponse pour le bouton qui a été cliqué. Cela signifie que le même gestionnaire fonctionne pour tous.

Et enfin - je ne sais pas si cela fait une différence, mais j'utilise e.preventDefault() au lieu de return false sur les gestionnaires de clic. Je ne sais pas - je pense juste que c'est plus élégant.

Answer 2

Vous avez également besoin de .clone(true) pour cloner ses gestionnaires.

Et vous voudrez probablement faire quelque chose comme ceci pour votre handler add another answer.

$('.answer:last').clone().appendTo($(this).prev().find('.answerContainer')).find("input").val("");  

Sinon, il est ajouté à tous les conteneurs de réponse.