Definir foco para o campo em DIV carregado dinamicamente

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

  •  07-07-2019
  •  | 
  •  

Pergunta

O que é o método adequado para definir o foco para um campo específico dentro de uma DIV dinamicamente carregado? 

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

O seguinte HTML é buscado no DIV display: 

<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>

Muito, muito obrigado!

Foi útil?

Solução

A função load () é uma função assíncrona. Você deve definir o foco após a carga () acabamentos de chamadas, que está na função de retorno de carga (), porque caso contrário o elemento que você está se referindo por #header, ainda não existe. Por exemplo: 

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

Eu tive problemas mim mesmo com esta solução, então eu fiz um setTimeout no retorno de chamada e definir o foco no tempo limite para fazer / realmente /-se que o elemento existe.

Outras dicas

Você já tentou simplesmente selecionando por Id? 

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

Vendo como IDs deve ser único, não há necessidade de ter um seletor mais específico.

Sim, isso acontece quando manipular um elemento que ainda não existe (algumas contribuinte aqui também fez um ponto bom com o ID único). Corri para um problema semelhante. Eu também preciso passar um argumento para a função de manipular o elemento em breve a ser processado.

A solução verificado fora aqui não me ajudou. Finalmente eu encontrei um que funcionou direito da caixa. E é muito bonita, também -. Fechamento

Em vez de: 

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

Tente isto: 

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

No meu código, testando passando o argumento, isso não funcionou, o tempo limite foi ignorado: 

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

Isso funciona, os carrapatos de tempo de espera: 

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

É chato que w3schools não mencioná-lo.

Os créditos vão para: makemineatriple. com .

Esperamos que isso ajude alguém que vem aqui.

Martas 

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

i tentou fazê-lo, mas ele não funciona, por favor me dar mais conselhos para resolver este problema. obrigado pela sua ajuda

Se 

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

não está funcionando, então há um outro elemento na sua página com o ID de cabeçalho?

Use o firebug para executar $("#header") e ver o que ele retorna.

Como Omu apontou, você deve definir o foco em uma função pronta documento. jQuery fornece isso para você. E não selecionada de id. Por exemplo, se você tem uma página de login: 

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

Isto funciona em carregamento da página. 

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

itens adicionados dinamicamente tem que ser adicionado ao DOM ... clone().append() adiciona ao DOM ... o que lhe permite ser selecionado via 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();
        }
    });
});

a maioria dos erros são por causa U usar objeto errado para definir o prorepty ou função. Uso console.log (new_fild); para ver até que objeto U tentar definir o prorepty ou função.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top