Элементы JQuery Clone с динамическим контентом

Question

Я так застрял здесь! У меня есть динамически созданные элементы внутри div, которые мне нужно сделать «копией» или более похожим на «вторую версию» этого элемента. Основная функция заключается в создании викторины с вопросами и ответами, но мне нужно создать несколько вопросов и ответов в одной викторине.

Вот Jquery:

var QuestionCreator = "QuestionCreator" + x++; 
    $(".modal-body-createquiz").html("<div id='QuestionCreator'><fieldset><div class='row-fluid'><div class='span12'><div class='control-group'><label>Your Question:</label><div class='controls'><input type='text' class='input-fluid' id='NewQuizQuestion'></div></div></div><legend>Answers:</legend><div class='control-group'><label class='checkbox pull-right'><input type='checkbox' id='NewQuizRemoveAlts'> Remove Alternatives</label></div><div class='NewQuizNotice'></div><div class='NewQuizAnswersGroup'></div><a href='#' id='addNewAltRadio' class='btn pull-right'><i class='fa-icon-plus-sign'></i> Create new alternative</a></div></fieldset></div>").hide().fadeIn('slow'); 

    var newAnswerAlt = "appendAnswerAltRadio" + i++; 
    $("<div><div class='controls'><input type='text' class='answerAltRadiobtn' data-type='answer' class='input-fluid' name='txtAnswer"+ n++ +"'> <label class='checkbox'><input type='checkbox' id='QuizCheckbox"+ c++ +"'> Correct Answer</label></div></div>").attr({id: newAnswerAlt, class: ''}).prependTo(".NewQuizAnswersGroup").hide().fadeIn('slow'); 
    }); 
    $(this).on('click', '#addNewAltRadio', function() { 
    var newAnswerAlt = "appendAnswerAltRadio" + i++; 
    $("<div><div class='controls'><input type='text' class='answerAltRadiobtn' data-type='answer' class='input-fluid' name='txtAnswer"+ n++ +"'> <label class='checkbox'><input type='checkbox' id='QuizCheckbox"+ c++ +"'> Correct Answer</label></div></div>").attr({id: newAnswerAlt, class: ''}).prependTo(".NewQuizAnswersGroup").hide().fadeIn('slow'); 
    }); 

И вот я пытаюсь сделать клон созданного элемента, но это необходимо, чтобы быть уникальным, так что происходит в одном клоне, не влияет на другие. Это похоже на «начинать с нуля» для каждого вновь созданного клона.

$("#addNewQuizCreateQuestion").click(function() { 
    $("#QuestionCreator").clone().appendTo(".modal-body-createquiz"); 
    }); 

Есть ли у кого-нибудь намек на то, что здесь делать?

Или вам нужно больше кода для получения рисунка?

Большое спасибо заранее!

Answer 1

Надежда Это поможет вам.

JSfiddle

Логика я использовал здесь, как, я создаю клон первого DIV, который «QuestionCreator1». Я сохранил скрытое поле, чтобы сохранить текущий идентификатор (инкрементирующую часть). Я использовал метод last() и ваше имя класса «QuestionCreator», чтобы получить последний элемент. Затем обновил его идентификатор (идентификатор последнего элемента) после клонирования его из «QuestionCreator1».

$("#addNewQuizCreateQuestion").click(function() { 
      var currentId=$("#currentId").val(); 
      var currentIdInt=parseInt(currentId); 
      currentIdInt++; 
      $("#currentId").val(currentIdInt); 
     $("#QuestionCreator1").clone().appendTo(".modal-body-createquiz"); 
      $(".QuestionCreator").last().attr("id","QuestionCreator"+currentIdInt); 
     });