帶有動態內容的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」的邏輯。我保留了一個隱藏字段來保存當前的ID（增量部分）。我用last()方法和你的類名「QuestionCreator」來獲取最後一個元素。然後從「QuestionCreator1」中克隆它的ID（最後一個元素的ID）。

$("#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); 
     });