Tengo un problema, no sé si les ha pasado anteriormente, tengo esta función que se llama "AgregarProducto" que mediante un append agrega ciertos campos de una base de datos, entre ellos unos SELECT que son llenados mediante AJAX, y me permiten elegir los datos, mi problema es que cuando agrego un producto (ítem o línea adicional), los SELECT anteriores también reciben un append, lo que los hace cada vez más grandes según voy agregando y sus procesos que se ejecutan en el evento change en los nuevos, también me afectan a los anteriores. ¿De qué manera puedo crearlos de forma tal, que sean independientes entre sí y no me suceda ese comportamiento?
/*=============================================
AGREGANDO PRODUCTOS DESDE LA TABLA
=============================================*/
$('.tablaInvFacturas tbody').on( 'click', 'button.btnAgregarProducto', function () {
var idProducto=$(this).attr("idProducto");
//console.log("idProducto",idProducto);
$(this).removeClass("btn-primary btnAgregarProducto");
$(this).addClass("btn-default");
var datos=new FormData();
datos.append("idProducto",idProducto);
$.ajax({
url:"ajax/inventarios.ajax.php",
method:"POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(respuesta){
//console.log("respuesta",respuesta);
var desc_prod =(respuesta["DESC_PROD"]);
var exist =(respuesta["EXIST"]);
var servicio =(respuesta["SERVICIO"]);
//var precio =(respuesta["PRECIO"]);
if(respuesta["SERVICIO"]==1){
$(".nuevoProducto").append(
'<!--Descripción del Producto-->'+
'<div class="row" style="padding: 5px 5px">'+
'<div class="col-xs-5" >'+
'<div class="input-group">'+
'<span class="input-group-addon">'+
'<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+
'</span>'+
'<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+
'</div>'+
'</div>'+
'<!--Cantidad del Producto-->'+
'<div class="col-xs-3">'+
'<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+
'</div>'+
'<!--Precio del Producto-->'+
'<div class="col-xs-4 ingresoPrecio">'+
'<div class="input-group">'+
'<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+
'<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+
'</div>'+
'</div>'+
'<div class="row" style="padding: 5px 15px">'+
'<!--Nombre del médico practicante-->'+
'<div class="col-xs-3" >'+
'<div class="input-group">'+
'<select class="form-control nuevoMdPracticante" idProducto name="nuevoMdPracticante" id="nuevoMdPracticante" required>'+
'<option>Md. practicante</option>'+
'</select>'+
'</div>'+
'</div>'+
'<!--Nombre del médico referente-->'+
'<div class="col-xs-3">'+
'<div class="input-group">'+
'<select class="form-control nuevoMdReferente" idProducto name="nuevoMdReferente" id="nuevoMdReferente" required>'+
'<option>Md. referente</option>'+
'</select>'+
'</div>'+
'</div>'+
'<!--Nombre del paciente-->'+
'<div class="col-xs-4">'+
'<div class="input-group">'+
'<select class="form-control baseExpediente" idMd name="baseExpediente" required>'+
'<option>Base Expediente</option>'+
'<option value="pacientes">Base Dr. 1</option>'+
'<option value="pacientesf">Base Dr. 2</option>'+
'<option value="pacientess">Base Dr. 3</option>'+
'</select>' +
'</div>'+
'<div class="input-group">'+
'<select class="form-control nuevoPacienteProcedimiento" idProducto name="nuevoPacienteProcedimiento" required>'+
'<option>Paciente</option>'+
'</select>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
);
medicosFact();
/*SUMAR TOTAL DE PRECIOS*/
sumarTotalPrecios();
}else{
$(".nuevoProducto").append(
'<!--Descripción del Producto-->'+
'<div class="row" style="padding: 5px 15px">'+
'<div class="col-xs-5" style="padding-right: 0px">'+
'<div class="input-group">'+
'<span class="input-group-addon">'+
'<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+
'</span>'+
'<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+
'</div>'+
'</div>'+
'<!--Cantidad del Producto-->'+
'<div class="col-xs-3">'+
'<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+
'</div>'+
'<!--Precio del Producto-->'+
'<div class="col-xs-4 ingresoPrecio">'+
'<div class="input-group">'+
'<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+
'<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+
'</div>'+
'</div>'+
'</div>'
);
/*SUMAR TOTAL DE PRECIOS*/
sumarTotalPrecios();
}
}
});
limpiarSelect("#nuevoMdPracticante");
limpiarSelect("#nuevoMdReferente");
});
Mi función limpiarSelect es la siguiente:
function limpiarSelect(id)
{
document.getElementById(id).options.length = 0;
}
Y el HTML usado es este:
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Crear Factura
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
<li class="active"><a href="crearfactura">Crear Factura</a></li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<!--FORMULARIO FACTURA-->
<div class="container-fluid">
<div class="box box-success">
<div class="box-header with-border"></div>
<form role="form" method="post" class="formularioFactura">
<div class="box-body">
<div class="box">
<!--ENTRADA DEL USUARIO QUE GENERA LA VENTA-->
<div class="form-group col-lg-4" style="padding: 2px">
<p class="help-block"><b>Usuario</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="nom_usuario" name="nom_usuario" value="<?php echo $_SESSION["NOM_USUARIO"]?>" readonly>
<input type="hidden" name="id_usuario" value="<?php echo $_SESSION["ID_USUARIO"]?>">
</div>
</div>
<!--FECHA DE EMISIÓN DEL DOCUMENTO-->
<div class="form-group col-lg-2" style="padding: 2px">
<p class="help-block"><b>Fecha de emisión</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="date" class="form-control" id="fecha_factura" name="fecha_factura" required>
</div>
</div>
<!--CONDICIÓN DE PAGO-->
<div class="form-group col-lg-4" style="padding: 2px">
<p class="help-block"><b>Condición</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
<select class="form-control" name="idCondicion" id="idCondicion" required>
<option value="">--Condición de Pago--</option>
<?php
$item=NULL;
$valor=NULL;
$condpago= ControladorCondPago::mostrarCondPago($item,$valor);
foreach ($condpago as $key => $value) {
echo '<option diasPago="'.$value["DIAS_PAGO"].'" value="'.$value["ID_COND"].'">'.$value["DESC_COND"].'</option>';
}
?>
</select>
</div>
<!--FECHA DE VENCIMIENTO DE LA FACTURA-->
</div>
<div class="form-group col-lg-2" style="padding: 2px">
<p class="help-block"><b>Fecha de vencimiento</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="date" class="form-control" id="fecha_venc" name="fecha_venc" readonly required>
</div>
</div>
<!--ENTRADA PARA EL TIPO DE FACTURA-->
<div class="form-group col-lg-3">
<p class="help-block"><b>Tipo de Factura</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<select class="form-control" name="tipoFactura" id="tipoFactura">
<option value="">--Seleccione Tipo de Factura--</option>
<?php
$item=NULL;
$valor=NULL;
$tipofact= ControladorTipoFact::mostrarTipoFact($item, $valor);
foreach ($tipofact as $key => $value) {
echo '<option value="'.$value["ID_TIPO"].'">'.$value["DESC_TIPO"].'</option>';
}
?>
</select>
</div>
</div>
<!--ELEGIR LA SERIE FISCAL-->
<div class="form-group col-lg-2">
<p class="help-block"><b>Serie Fiscal</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<select class="form-control serieFactura" name="serieFactura" id="serieFactura">
<option value="">--Seleccione Serie Fiscal--</option>
</select>
</div>
</div>
<!--MOSTRAR EL NÚMERO DE FACTURA A IMPRIMIR-->
<div class="form-group col-lg-2">
<p class="help-block"><b>Número de Factura</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input type="number" class="form-control" id="nuevaFact" name="nuevaFact" readonly required>
</div>
</div>
<!--ENTRADA PARA EL EL CLIENTE-->
<div class="form-group col-lg-5">
<p class="help-block"><b>Nombre del cliente</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users"></i></span>
<select class="form-control" id="seleccionarCliente" name="seleccionarCliente" required>
<option value="">--Seleccionar Cliente--</option>
<?php
$itemcli=NULL;
$valorclie=NULL;
$clientes= ControladorClientes::mostrarClientes($itemcli, $valorcli);
foreach ($clientes as $key => $value) {
echo '<option value="'.$value["ID_CLIENTE"].'">'.$value["ID_CLIENTE"].' - '.$value["NOM_CLIENTE"].'</option>';
}
?>
</select>
<span class="input-group-addon">
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#modalAgregarCliente" data-dismiss="modal">Agregar Cliente</button>
</span>
</div>
</div>
<!--BOTÓN PARA AGREGAR PRODUCTO-->
<button type="button" class="btn btn-primary btnAgregarItem col-lg-3">Agregar Item</button>
<hr>
<!--ENCABEZADO DE TABLA PARA AGREGAR ITEMS-->
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Cantidad</th>
<th>Código</th>
<th>Descripción</th>
<th>Impuesto</th>
<th>Lista de Precio</th>
<th>Precio Unitario</th>
<th>Sub-total</th>
<th>Acción</th>
</tr>
</thead>
<tbody class="nuevoProducto">
<!--ENTRADA PARA AGREGAR PRODUCTO-->
<!-- <div class="form-group row nuevoProducto">
</div>-->
</tbody>
</table>
</div>
<div class="row">
<!--ENTRADA DE IMPUESTOS Y TOTAL-->
<div class="col-xs-8 pull-right">
<table class="table">
<thead>
<tr>
<th>Impuesto</th>
<th>Recargo</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 50%">
<div class="input-group">
<input type="number" class="form-control input-lg" id="nuevoImpuestoVenta" name="nuevoImpuestoVenta" readonly required>
<span class="input-group-addon"><i class="fa fa-percent"></i></span>
</div>
</td>
<td style="width: 50%">
<div class="input-group">
<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>
<input type="number" value="0.00" class="form-control input-lg" id="nuevoRecargoTc" name="nuevoRecargoTc" readonly required>
</div>
<p class="help-block"><b>TOTAL</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>
<input type="number" value="0.00" class="form-control input-lg" id="nuevoTotalVenta" name="nuevoTotalVenta" readonly required>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<!--ENTRADA MÉTODO DE PAGO-->
<div class="form-group row">
<div class="col-xs-6" style="padding-right: 0px">
<div class="input-group">
<select class="form-control" id="nuevoMetodoPago" name="nuevoMetodoPago" required>
<option value="">Seleccione Forma de Pago</option>
<?php
$item=NULL;
$valor=NULL;
$formaspago= ControladorFormPago::mostrarFormPago($item, $valor);
foreach ($formaspago as $key => $value) {
echo '<option numAutorización="'.$value["AUTORIZACION"].'" recargoFormPago="'.$value["RECARGO_FORMPAGO"].'" value="'.$value["ID_FORMPAGO"].'">'.$value["DESC_FORMPAGO"].'</option>';
}
?>
</select>
</div>
</div>
<div class="cajasMetodoPago"></div>
<br>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary pull-right">Guardar Factura</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->