Placer le focus sur le champ de charger dynamiquement des DIV

Question

Quelle est la bonne méthode pour définir le focus à un champ spécifique à l'intérieur d'un chargement dynamique des DIV?

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

Le code HTML suivant est récupérée dans l' 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>

Merci beaucoup, beaucoup!

Answer 1

La fonction load() est une fonction d'asynchrone. Vous devez définir le focus après le load() appel de finitions, c'est dans la fonction de rappel de charge(), parce que sinon, l'élément de référence de par #header, n'existe pas encore. Par exemple:

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

J'ai eu des problèmes moi-même, même avec cette solution, j'ai donc fait un setTimeout dans le rappel, et placer le focus dans le délai d'attente pour faire /vraiment/ assurez-vous que l'élément existe.

Answer 2

Avez-vous essayé simplement en le sélectionnant par Id?

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

Voir aussi Id doit être unique, il n'y a pas besoin d'avoir un plus spécifiques sélecteur.

Answer 3

Oui, cela se produit lors de la manipulation d'un élément qui n'existe pas encore (un peu de contributeurs ici aussi a fait un bon point avec l'ID unique). J'ai rencontré un problème similaire. J'ai aussi besoin de passer un argument à la fonction de manipulation de l'élément qui sera bientôt rendu.

La solution coché ici ne m'a pas aidé. J'ai enfin trouvé un qui a fonctionné dès la sortie de la boîte. Et c'est très jolie, trop - fermetures.

Au lieu de:

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

Essayez ceci:

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

Dans mon code, les tests de passage de l'argument, il n'a pas de travail, le délai d'attente a été ignoré:

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

Cela fonctionne, le délai d'attente tiques:

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

Il suce que w3schools ne pas le mentionner.

Les crédits vont à: makemineatriple.com.

Espérons que cela aide quelqu'un qui vient ici.

Martas

Answer 4

Si

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

ne fonctionne pas alors il y a un autre élément sur votre page avec l'id de la tête?

Utiliser firebug pour exécuter $("#header") et voir de quoi il en retourne.

Answer 5

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

je l'ai essayé mais ça ne fonctionne pas, merci de me donner des conseils pour résoudre ce problème. merci pour votre aide