2

「質問を追加」ボタンを使用して複数の質問を追加できるフォームがあります。ボタンをクリックすると、新しいアコーディオン グループが作成されます。

<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>

テキスト ボックスにスタイルを設定するスクリプトもいくつかありますが、これらのスタイルは追加された新しい動的コンテンツには適用されません。また、各アコーディオン グループ内の選択ボックスの配置も無効になります。これを解決する方法を知っている人はいますか？

4

2 に答える 2

1

これはどうですか: 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);
 }
于 2013-03-16T20:17:28.780 に答える
0

これは私にとってはうまくいきました。すべての助けをありがとう:)

function addQuestion(){     
               var newContent = "<div id='group2' class='accordion-group'>" +
                                "<input type='text' id='question2' class='textbox-input'/>" +
                                "</div>";
               $("#accordion1").append(newContent);
}
于 2013-03-16T20:25:35.473 に答える