duplicar - jquery agregar formulario

Establecer el foco en el campo en DIV cargado dinámicamente

Question

¿Cuál es el método adecuado para establecer el foco en un campo específico dentro de una DIV cargada dinámicamente?

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$(''#display'').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$(''#display'', ''#header'').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

El siguiente código HTML es captado en la display DIV:

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

¡Muchas muchas gracias!

Answer 1

¿Has intentado simplemente seleccionar por Id?

$("#header").focus();

Dado que los Ids deben ser únicos, no es necesario tener un selector más específico.

Answer 2

Como señaló Omu, debes establecer el foco en una función de documento preparado. jQuery lo proporciona por ti. Y seleccione en una identificación. Por ejemplo, si tiene una página de inicio de sesión:

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

Answer 3

Esto se ejecuta en la carga de la página.

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>

Answer 4

La función load () es una función asíncrona. Debería establecer el foco después de que finalice la llamada a load (), que está en la función de devolución de llamada de load (), porque de lo contrario el elemento al que se refiere por #header, aún no existe. Por ejemplo:

$("#display").load("?control=msgs", {}, function() { 
  $(''#header'').focus();
}); 

Yo tuve problemas incluso con esta solución, así que hice un setTimeout en la devolución de llamada y establecí el foco en el tiempo de espera para hacer / really / sure que el elemento existe.

Answer 5

Los elementos añadidos dinámicamente deben agregarse al DOM ... clone().append() agrega al DOM ... lo que le permite ser seleccionado a través de jquery.

Answer 6

Sí, esto sucede cuando se manipula un elemento que aún no existe (algunos contribuidores también hicieron un buen punto con la ID única). Me encontré con un problema similar. También necesito pasar un argumento a la función que manipula el elemento que pronto será renderizado.

La solución marcada aquí no me ayudó. Finalmente encontré uno que funcionaba de la caja. Y es muy bonito también, cierres.

En lugar de:

$( ''#header'' ).focus();
or the tempting:
setTimeout( $( ''#header'' ).focus(), 500 );

Prueba esto:

setTimeout( function() { $( ''#header'' ).focus() }, 500 );

En mi código, probando pasar el argumento, esto no funcionó, el tiempo de espera fue ignorado:

setTimeout( alert( ''Hello, ''+name ), 1000 );

Esto funciona, los tics de tiempo de espera:

setTimeout( function() { alert( ''Hello, ''+name ) }, 1000 );

Apesta que w3schools no lo mencione.

Los créditos van a: makemineatriple.com .

Con suerte, esto ayuda a alguien que viene aquí.

Martas

Answer 7

Si

$("#header").focus();

no está funcionando, ¿hay otro elemento en su página con la identificación del encabezado?

Use firebug para ejecutar $("#header") y vea qué devuelve.

Answer 8

$("#display").load("?control=msgs", {}, function() { 
  $(''#header'').focus();
});

Lo intenté pero no funciona, por favor dame más consejos para resolver este problema. gracias por tu ayuda

Answer 9

$("#header").attr(''tabindex'', -1).focus();

Answer 10

$(function (){
    $(''body'').on(''keypress'',''.sobitie_snses input'',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('''');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

la mayoría de los errores se deben a que U usa un objeto incorrecto para establecer la función o el prorrateo. Use console.log (new_fild); para ver a qué objeto U intenta establecer el prorepty o la función.