javascript - 动态添加的字段是添加随机序列-JS？

Question

我有一个按钮，每当我点击添加按钮时，它就会添加一组文本字段。 实际上，每当我添加新文本字段时，它都会附加到添加更多按钮上方，当我再次按下该按钮时，它会将文本字段添加到最近添加的文本字段上方。

它必须恰好添加到 **Add More ** 按钮上方，而不是在最近添加的文本字段上方。

下面是我的代码，请检查我哪里出错了

new.php

. . . . . 


<div class="col-md-8 col-sm-12 col-24">
    <div class="input_fields" style="color:black">
         <button class="add_field btn " onclick="incrementValue()" >Add More</button>
         <div>
         <input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>
</div>


. . . . . . . 



<script type="text/javascript">

     $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields"); //Fields wrapper
    var add_button      = $(".add_field"); //Add button ID
    var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_fields){ //max input box allowed
            x++; //text box increment
           $(wrapper).prepend('<br><div style="margin-left:50%;"><div class="form-group"><label class="control-label type" for="selectbasic" style="">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control type_of_work" style=""><option value="Audit Report">Audit Report</option><option value="ITR filing">ITR filing</option><option value="VAT Filing">VAT Filing</option><option value="Accounting">Accounting</option><option value="Registration">Registration</option><option value="Certification">Certification</option><option value="Others">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">Status</label><div class="col-md-6"><select id="status1' + x + '"  name="status[]"  class="form-control status"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pickers" id="date" name="date[]" style="" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">Comment</label><div class="col-md-4"><input id="comments' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div></center><a href="#" class="remove_field" style=""><img src="images/del24.png" ></a></a></div>'); //add input box\
          var newInput=$("#date").datepick({dateFormat: 'dd/mm/yyyy'});
          newInput.datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", new Date());
          $("#status1" + x).click(function () {

            if ($("#status1" + x).val() == "Completed") {
                $("#comments" + x).attr("required", "required");
            }
            else
              $("#comments" + x).attr("required", false);
        });

      }
    });
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })

    $(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })

  });


</script>

正如您在下图中看到的，在评论字段中我添加了数字只是为了引用它是如何添加的，希望序列如上添加更多按钮但它被添加在顶部

提前致谢!

Answer 1

您必须以不同方式添加模板。而不是

$(wrapper).prepend('<br><div style="marg (...) of ></a></a></div>')

这样添加

$('<br><div style="marg (...) of ></a></a></div>').insertBefore(add_button)