質問

I have a form where one can add multiple questions using the "Add Question" button. If you click on the button, a new accordion-group is created.

<div id="accordion1" class="accordion">
      <div id="group1" class="accordion-group">
           <input type='text' id='question1' class='textbox-input'/>
      </div>
</div>
<input type"button" value="Add Question" id="addQuestion" onclick="javascript:addQuestion();"/>

<script>
 function addQuestion(){
       var previousContent = document.getElementById("accordion1").innerHTML;
       var newContent = "<div id='group2' class='accordion-group'>" +
                        "<input type='text' id='question2' class='textbox-input'/>" +
                        "</div>";
       document.getElementById("accordion1").innerHTML = previousContent + newContent;
 }
</script>

I also have some scripts that give styling to the textboxes, but those styles do not get applied to the new dynamic content added. And also the select boxes places inside each accordion-group gets disabled. Does anyone know how to solve this?

役に立ちましたか?

解決 2

This worked for me. Thanks for all the help :)

function addQuestion(){     
               var newContent = "<div id='group2' class='accordion-group'>" +
                                "<input type='text' id='question2' class='textbox-input'/>" +
                                "</div>";
               $("#accordion1").append(newContent);
}

他のヒント

How about this: http://jsfiddle.net/PVbRJ/

$("#addQuestion").live('click', addQuestion);


 function addQuestion(){
       var previousContent = $("#accordion1").html();

       var newContent = "<div id='group2' class='accordion-group'>" +
                        "<input type='text' id='question2' class='textbox-input'/>" +
                        "</div>";
       $("#accordion1").html(previousContent + newContent);
 }
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top