Poner foco en input creado dinámicamente

[Integer78]

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();

[ArturoGallegos]

id="articulos_codigo['+data+']"

Este ID no es valido, solo puede contener números, letras y guiones, así como debe empezar con una letra

Es decir nada de corchetes y llaves u otros símbolos [] {} $ % & * etc

Aquí tienes un ejemplo con javascript vanilla y otro con jQuery

https://jsfiddle.net/arturogallegos/md4wzg98/1/

[Integer78]

Arturo lo que intento es crear un arreglo de inputs. data es una variable que viene como parámetro de la función que crea los inputs y yo la concateno a los corchetes, por eso los signos +. Yo quiero que los inputs tengan como ID articulos_codigo[0], articulos_codigo[1], articulos_codigo[2] y así sucesivamente. Eso parece funcionar, si yo miro el código fuente los inputs tienen así los IDs, tal como yo quiero. Lo que no logro es poner el foco en, por ejemplo, articulos_codigo[0]. Googleando encontré que varios decían que se podría hacer con esta sintaxis:

$("[id^=articulos_codigo]").eq(data).focus();

Pero no me funciona...

Si tu dices que un ID con corchetes no es válido ¿cómo se hace un arreglo de inputs en javascript? En el pasado lo he hecho con PHP poniendo corchetes en el name y pensé que iba a poder hacer algo parecido en javascript pero ya veo que no...

[ArturoGallegos]

Exactamente como dices, el arreglo de inputs es usando los corchetes pero en el nombre no en el ID, para agregar los id yo usaria nombre_1 o nombre-1 si no te gusta pues al chile nombre0

<input name="nombre[0]" id="nombre_0" />
<input name="nombre[1]" id="nombre_1" />
<input name="nombre[2]" id="nombre_2" />
<input name="nombre[3]" id="nombre_3" />

ahora si ya puedes usar el ID para fijar el focus
document.getElementById('nombre_0').focus()

[Integer78]

Si, entiendo la idea, pero otra duda, he intentado colocar el foco a través del name donde supuestamente no hay problemas con los corchetes y el problema continúa, me hace exactamente lo mismo. O sea ahora intento poner el foco así: $("[name^=articulos_codigo]").eq(data).focus(); y tampoco funciona.

[ArturoGallegos]

Te tocara esperar a que se conecte algún compañero con buen nivel de conocimiento en jQuery.

Yo me quedo sin mas recursos con que ayudarte.

:D la otra es que modifiques tu código y adaptes lo que te he mostrado en mi ejemplo... pero eso ya depende de ti.


Buena suerte!