Establecer foco en campo en DIV cargado dinámicamente

StackOverflow https://stackoverflow.com/questions/1433742

  •  07-07-2019
  •  | 
  •  

Pregunta

¿Cuál es el método adecuado para establecer el foco en un campo específico dentro de un DIV cargado 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 HTML se obtiene 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!

¿Fue útil?

Solución

La función load () es una función asincrónica. Debe establecer el foco después de que finalice la llamada load (), es decir, en la función de devolución de llamada de load (), porque de lo contrario el elemento al que se refiere #header, aún no existe. Por ejemplo: 

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

Tuve problemas incluso con esta solución, así que hice un setTimeout en la devolución de llamada y establecí el enfoque en el tiempo de espera para asegurar / realmente / asegurar que el elemento existe.

Otros consejos

¿Has intentado simplemente seleccionar por Id? 

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

Como los ID deberían ser únicos, no es necesario tener un selector más específico.

Sí, esto sucede cuando se manipula un elemento que aún no existe (algunos contribuyentes aquí 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 se representará.

La solución marcada aquí no me ayudó. Finalmente encontré uno que funcionó de inmediato. Y también es muy bonito: 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, el tiempo de espera funciona: 

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 

$("#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

Si 

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

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

Use firebug para ejecutar $ (" # header ") y vea lo que devuelve.

Como señaló Omu, debe establecer el foco en una función de documento listo. jQuery te lo proporciona. 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!

Esto se ejecuta al cargar la página. 

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

Los elementos agregados dinámicamente deben agregarse al DOM ... clone (). append () lo agrega al DOM ... lo que permite que se seleccione mediante jquery. 

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

$(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 parte del error se debe a que U usa un objeto incorrecto para establecer la propiedad o función. Use console.log (new_fild); para ver qué objeto U intenta establecer la propiedad o función.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top