Hola tengo un programa donde voy agregando unos inputs al DOM mediante el método appendTo de jquery. Me funciona bien, sin embargo, tengo el problema de que además necesito que una vez que aparezcan los nuevos inputs el foco se ponga en uno de ellos. Por alguna razón el foco nunca se pone en el input que yo quiero, se va a otro, hace cualquier cosa. Tengo la teoría de que tal vez yo estoy ejecutando el método focus() antes de que appendTo haya terminado de ejecutarse. ¿Puede ser este el problema? Y si es así ¿cómo detecto cuándo appendTo haya terminado de crear mis nuevos input?
Aquí dejo mi código: Como verán la primera parte crea una seria de inputs y la última línea intenta colocar el foco en el primer input de la serie, pero eso no pasa, el foco siempre se va a otro lado y no donde yo necesito.
Código:
cant_filas_detalle++;
data=cant_filas_detalle-1;
var $myNewElement = $('<div class="row fila_detalle_comprobante"><div class="col-xs-12 col-md-2 campos_detalle codigo_detalle"> <p><input autocomplete="off" type="text" class="form-control codigos_detalle" id="articulos_codigo['+data+']" name="articulos_codigo['+data+']" value="" onKeyUp="buscador_estilo_google(\'numero_articulo\', this.value, '+data+', \'resultado_buscador_codigo\', event)"></p><div id="resultado['+data+']" class="resultado_buscador_codigo"></div></div><div class="col-xs-12 col-md-4 campos_detalle"><p><input type="text" required class="form-control" id="descripcion_articulo_historica['+data+']" name="descripcion_articulo_historica['+data+']" value="" onKeyUp="buscador_estilo_google(\'descripcion_gen\', this.value, '+data+', \'resultado_buscador_desc\', event)"></p><div id="resultado_por_desc['+data+']" class="resultado_buscador_desc"></div></div><div class="col-xs-12 col-md-1 campos_detalle cantidad_detalle"><p><input type="text" required class="form-control" id="cantidad['+data+']" name="cantidad['+data+']" value="0" onChange="calcular_linea_detalle ('+data+')"></p></div> <div class="col-xs-12 col-md-1 campos_detalle"><p><input readonly type="text" required class="form-control" id="nombre_un_medida_historica['+data+']" name="nombre_un_medida_historico['+data+']" value=""></p></div><div class="col-xs-12 col-md-2 campos_detalle precio_detalle"><p><input type="text" required class="form-control" id="precio_unitario['+data+']" name="precio_unitario['+data+']" value="0,00" onChange="calcular_linea_detalle ('+data+')"></p></div><div class="col-xs-12 col-md-1 campos_detalle bonificacion_detalle"><p><input type="text" required class="form-control" id="bonificacion['+data+']" name="bonificacion['+data+']" value="0,00" onChange="calcular_linea_detalle ('+data+')"></p></div><div class="col-xs-12 col-md-2 campos_detalle subtotal_detalle"><p><input readonly type="text" required class="form-control" id="subtotal['+data+']" name="subtotal['+data+']" value="0,00"></p></div><div class="col-xs-12 col-md-1 campos_detalle alicuota_iva_detalle"><p><input readonly type="text" required class="form-control" id="alicuota_iva['+data+']" name="alicuota_iva['+data+']" value="0,00"></p></div><div class="col-xs-12 col-md-2 campos_detalle subtotal_detalle subtotal_c_iva_detalle"><p><input readonly type="text" required class="form-control" id="subtotal_c_iva['+data+']" name="subtotal_c_iva['+data+']" value="0,00" onKeyDown="crear_linea('+data+', event)"></p></div>');
$myNewElement.appendTo('#lineas_comprobante');
$("[id^=articulos_codigo]").eq(data).focus();