Question

我正在更新运行Bootstrap 2.0.4的网站上的某些内容（我知道它已过时，但还没有时间更新它！）。

我正在尝试在输入元素上添加一个按钮。单击该按钮后，我将使用jquery在其下动态添加另一个按钮，我也需要在此按钮之前添加一个按钮。

我已经创建了fiddle，非常感谢您的帮助。

HTML

<div class="input-group control-group after-add-more">
  <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
  <div class="input-group-btn">
    <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
  </div>
</div>
<div class="copy-fields hide">
  <div class="control-group input-group" style="margin-top:10px">
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
    <div class="input-group-btn">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
    </div>
  </div>
</div>

JQUERY

 $(document).ready(function() {
   $(".add-more").click(function() {
     var html = $(".copy-fields").html();
     $(".after-add-more").after(html);
   });
   $("body").on("click", ".remove", function() {
     $(this).parents(".control-group").remove();
   });
 });

Answer 1

在下面检查更新的代码段。...

 $(".add-more").click(function() {
   var html = $(".copy-fields").html();
   $(".after-add-more").before(html);
 });
 $("body").on("click", ".remove", function() {
   $(this).parents(".control-group").remove();
 });

.hide{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
  <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
  <div class="input-group-btn">
    <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
  </div>
</div>
<div class="copy-fields hide">
  <div class="control-group input-group" style="margin-top:10px">
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
    <div class="input-group-btn">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
    </div>
  </div>
</div>

自举前置按钮到动态输入

1 个答案: