附加的 html 总是添加到最后一个动态创建的 div

Question

我正在尝试将输入字段和按钮附加到具有 id 的动态创建的 div。每次单击另一个按钮时，var i 会增加一，该数字会添加到我尝试将 HTMl 附加到的 id 中。

// Category
var i = 1;
$('#addcategory').click(function() {
  i++;
  $('#dynamic_field').append('<div class="row" id="row' + i + '"><div class="col-md-8"><ul class="categorylist"><li><input type="text" name="category[]" placeholder="' + i + '. Voeg een categorie toe" class="form-control name_list" /><div id="dynamic_questionfield' + i + '"><div class="row" id=questionrow"' + i + '">  <div class="col-md-8"> <ul class="questionlist">  <li> <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list" />  </li> </ul>  </div>  <div class="col-md-4"> <button type="button" name="addquestion" id="addquestion' + i + '" class="btn btn-success questionbutton">Extra vraag</button>  </div> </div></div></li></ul></div><div class="col-md-4"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></div></div>');
});
$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});

// Question
var e = 1;
$(document).on("click", "#addquestion" + i + "", function() {
  e++;
  $('#dynamic_questionfield' + i + '').append('<div class="row" id="questionrow' + e + '"> <div class="col-md-8"> <ul class="questionlist"> <li> <input type="text" name="question[]" placeholder="' + e + '. Voeg een vraag toe" class="form-control name_list"> </li> </ul> </div><div class="col-md-4"><button type="button" name="remove" id="' + e + '" class="btn btn-danger removequestion btn_removequestion">X</button></div></div>');
});
$(document).on('click', '.btn_removequestion', function() {
  var button_id = $(this).attr("id");
  $('#questionrow' + button_id + '').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic_field">
  <div class="row">
    <div class="col-md-8">
      <ul class="categorylist">
        <li>
          <input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list" />
          <div id="dynamic_questionfield1">
            <div class="row">
              <div class="col-md-8">
                <ul class="questionlist">
                  <li>
                    <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list" />
                  </li>
                </ul>
              </div>
              <div class="col-md-4">
                <button type="button" name="addquestion" id="addquestion1" class="btn btn-success questionbutton">Extra vraag</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <button type="button" name="addcategory" id="addcategory" class="btn btn-success">Extra categorie</button>
    </div>
  </div>
</div>

这是我的意思的截图：

当我单击第一个显示 extra vraag 的按钮时，它应该在第一个列表中添加一个额外的输入字段，但它会将其添加到第二个列表中。

如果我添加多个列表也会发生同样的情况，它总是将新的输入字段添加到最后添加的列表项中。

这是为什么呢？

Answer 1

你可以试试下面的脚本。当您单击额外的 vaarg 按钮定位类“questionbutton”时，它将根据您当前的 html 结构添加一个额外的行元素。

$(document).ready(function(){ var new_input = <div class="row"> <div class="col-md-8"> <ul class="questionlist"> <li> <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list" /> </li> </ul> </div> <div class="col-md-4"> <button type="button" name="addquestion" id="addquestion1" class="btn btn-success questionbutton">Extra vraag</button> </div> </div>;

$(".questionbutton").on('click',function(){
    $(this).parent().parent().append(new_input);
});

});