jQuery Repeater，如何在底部创建“创建按钮”？

Question

我了解到data-repeater-create=""必须位于id="left_repeater" ，否则它将无法用作创建按钮。 有没有办法使按钮在id="left_repeater"或id="right_repeater" id="left_repeater"之外id="left_repeater" ？

我的目标是当我点击add left按钮，它只会创造了左输入端，反之亦然add right按钮。 这两个按钮都在最底部。

JS小提琴链接查看代码

 $('#left_repeater').repeater({ show: function() { $(this).slideDown(); }, }); $('#right_repeater').repeater({ show: function() { $(this).slideDown(); }, }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script> <div id="left_repeater"> <div data-repeater-list="left_items"> <div data-repeater-item> <div class="row"> <div class="col-6"> <input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left"> </div> <div class="col-6"> </div> </div> </div> </div> <!-- <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add</span></span> </div> --> </div> <div id="right_repeater"> <div data-repeater-list="right_items"> <div data-repeater-item> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right"> </div> </div> </div> </div> <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add</span></span> </div> </div> <div class="row"> <div class="col-6 text-center"> <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add Left</span></span> </div> </div> <div class="col-6 text-center"> <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add Right</span></span> </div> </div> </div> 

Answer 1

将#left_repeater放入div容器中。

<div class="container">
   <div id="left_repeater">
     .....
   </div>
</div>

为此添加CSS样式

.container {
  display: flex;
}

https://jsfiddle.net/y1bpot5n//