克隆表格的一部分后如何保持其行为
[英]How to maintain the behavior of the form after a fragment of it is cloned
问题描述
我正在制作一个动态表单，必须从用户隐藏的父div开始复制一个相同的动态表单，根据用户的要求多次，该表单根据选择的select选项具有某些行为，该选项必须隐藏或显示两个输入...
我已经尝试使用.clone（true），但是在选择指示的选项时，无法获得显示“其他”文档规范的元素被隐藏和显示，对于选定的选项它不是隐藏的卡...我希望通过克隆表单片段，这些字段可以用作父元素，但不能。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-border">
<div class="panel panel-default" id="tabn">
<div class="form-group">
<div class="col-sm-offset-10">
<input type="button" id="deleteRow" class="btn btn-success btn-circle btn-lg"><i
class="glyphicon glyphicon glyphicon-trash"></i></button>
</div>
</div>
<div class="panel-heading" role="tab" id="heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-user"></i>Beneficiario Final</a>
</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>
<h3>Identificación del Beneficiario</h3>
</label>
<div class="form-group">
<label class="col-xs-2 control-label">Nombres y Apellidos</label>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Nombres</span>
<input type="text" class="form-control" name="nombres[]" id="nombresn" />
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Apellidos</span>
<input type="text" class="form-control" name="apellidos[]" id="apellidosn" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Documento de identificación</label>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Tipo</span>
<select class="form-control" name="tipo_id[]" id="tipo_idn" onChange="documentos(this, n)" >
<option value="" default selected>Tipo de documento</option>
<option value="1">cedula</option>
<option value="2">pasaporte</option>
<option value="3">otro</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">No.</span>
<span class="input-group-btn" id="78">
<select class="btn" id="cedula_tipon" name="cedula_tipo[]" >
<option value="" default selected>...</option>
<option >V</option>
<option >E</option>
</select>
</span>
<input type="text" class="form-control" name="num_id[]" id="num_idn" />
</div>
</div>
</div>
<div class="form-group" id="lbl_otro_documenton" style="display:none;">
<label class="col-xs-2 control-label">Especifique:</label>
<div class="col-xs-4">
<input type="text" maxlength="20" name="otro_documento[]" id="otro_documenton" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Fecha de nacimiento</label>
<div class="col-xs-8 date">
<div class="input-group input-append date" id="dateRangePickern">
<span class="input-group-addon" id="basic-addon1">Fecha de nacimiento</span>
<input type="text" class="form-control" id="fec_nacn" name="fec_nac[]" placeholder="Fecha de nacimiento" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label"></label>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">País de nacimiento</span>
<select class="form-control" name="pais_nacimiento[]" id="pais_nacimienton" >
<option value="" default selected>País de nacimiento</option>
<option value="1">Canada</option>
<option value="2">Venezuela</option>
<option value="3">USA</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">% Participación</span>
<input type="text" class="form-control" maxlength="5" onkeyup="sumarPART();" name="por_part[]" id="por_partn" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Dirección</label>
<div class="col-xs-8">
<textarea class="form-control" rows="3" id="direccionn" name="direccion[]" ></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="container">
</div>
<div class="form-group">
<div class="col-sm-offset-6">
<input type="button" id="addRow" class="btn btn-success btn-circle btn-lg"><i
class="glyphicon glyphicon-plus"></i>
</div>
</div>
var maxGroup = 17;
var cant_bft = 0;
var n = 0;
$('#deleteRow').closest('.form-group').hide();
$('#addRow').on('click', function(e) {
var len = parseInt($('.child-border').length)+parseInt(cant_bft);
if (len <= maxGroup) {
$('.parent-border').clone(true).find(':input:not(button)', ':select').each(function(idx, ele) {
ele.id = ele.id.substring(0, ele.id.length - 1) + len;
ele.value = '';
}).end().find('.form-group').toggle(true).end()
.toggleClass('parent-border child-border').hide()
.appendTo('#container').slideDown('slow');
} else {
$('#addRow').attr("disabled", true);
}
});
$('#container').on('click', '[id^=deleteRow]', function(e) {
$(this).closest('.child-border, .parent-border').remove();
$('#btnAdd').removeAttr('disabled', 'disabled');
});
function documentos(sel, n) {
if (sel.value=="78"){
$("#78"+n).show('linear');
$("#bf_ced"+n).show();
$("#bf_od"+n).hide();
}else{
$("#78"+n).hide('linear');
$("#bf_ced"+n).hide();
$("#bf_od"+n).show();
}
if (sel.value == "160") {
$("#lbl_otro_documento"+n).show("linear");
$("#otro_documento"+n).val("");
}else{
$("#lbl_otro_documento"+n).hide("linear");
}
}
同样，基于jquery daterangerpicker实用工具的日历行为不会将其功能从父级传递给克隆
0 个解决方案
使用jquery开始旋转时如何保持克隆元素的旋转位置
[英]How to maintain position of rotation for cloned element when start rotating using jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.