[英]Icon clone element in the wrong place
When I click the +
next to the Input 1
a line gets cloned and next to the first line a -
appears, which is precise what I want :-) 当我单击Input 1
旁边的+
,将克隆一行,并在第一行旁边出现-
,这正是我想要的内容:-)
But when I press the +
next to the Input 2
the -
icon appears in next to the line of Input 1
. 但是,当我按Input 2
旁边的+
时, -
图标出现在Input 1
的行旁边。
I can't figure out what I'm doing wrong as when you click +
next to Input 2
I want the -
next to the first line of Input 2
我无法弄清楚我在做什么错,因为当您单击Input 2
旁边的+
,我想要-
Input 2
第一行旁边的-
$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span>-</span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });
.entry { text-align: left; margin-bottom: 25px; margin-top: 25px; } .entry input { height: 50px; padding: 10px; } .entry input:nth-child(2) { margin-left: 25px; width: 66% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="controls"> <form class="school_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'> <input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div> <div class="controls"> <form class="werk_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'> <input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div>
var controlForm = $('.controls form:first')//here you also select first control even if you are on second controlforms var controlForm = $('。controls form:first')//在这里,即使您使用的是第二个控件窗体,也可以选择第一个控件
so replace this with 所以换成
var controlForm = $(this).closest('.controls').find('form:first')//which is also select closest one var controlForm = $(this).closest('。controls')。find('form:first')//这也是选择最接近的一个
$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $(this).closest('.controls').find('form:first'),//you have to select colsest controls currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span>-</span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });
.entry { text-align: left; margin-bottom: 25px; margin-top: 25px; } .entry input { height: 50px; padding: 10px; } .entry input:nth-child(2) { margin-left: 25px; width: 66% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="controls"> <form class="school_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'> <input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div> <div class="controls"> <form class="werk_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'> <input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.