Ustaw fokus na pole w dynamicznie ładowanym DIV

Question

Jaka jest właściwa metoda ustawiania fokusu na określone pole w dynamicznie ładowanym 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 

następujący kod HTML jest pobierany do 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> 

Wiele, wiele dzięki!

Answer 1

Funkcja load() jest funkcją asynchroniczną. Powinieneś ustawić fokus po zakończeniu wywołania load(), które jest w funkcji wywołania zwrotnego load(), ponieważ w przeciwnym razie element, do którego odwołujesz się przez #header, jeszcze nie istnieje. Na przykład:

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

miałem problemów sobie nawet z tego rozwiązania, więc zrobiłem setTimeout w zwrotnego i ustawić ostrość na timeout, aby/naprawdę/pewien element istnieje.

Answer 2

Czy próbowałeś po prostu wybrać przez Id?

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

Widząc jak identyfikatory powinny być unikalne, nie ma potrzeby, aby mieć bardziej konkretnego wyboru.

Answer 3

Jeśli

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

nie działa wtedy jest tam inny element na swojej stronie z identyfikatorem nagłówka?

Użyj firebug, aby uruchomić $("#header") i zobaczyć, co powraca.

Answer 4

Dynamicznie dodane elementy muszą zostać dodane do DOM ... clone().append() dodaje je do DOM ..., który pozwala na ich wybór za pomocą jquery.

Answer 5

Próbowałem, ale to nie działa, proszę dać mi więcej porad, aby rozwiązać ten problem. dziękuję za pomoc

Answer 6

Tak, dzieje się tak, gdy manipulujemy elementem, który jeszcze nie istnieje (kilku współpracowników tutaj również miało dobry cel z unikalnym identyfikatorem). Wpadłem na podobny problem. Muszę też przekazać argument do funkcji manipulującej elementem, który wkrótce zostanie wyrenderowany.

Rozwiązanie sprawdzone tutaj nie pomogło mi. W końcu znalazłem taki, który działał zaraz po wyjęciu z pudełka. I to też jest bardzo ładne - zamknięcia.

Zamiast:

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

Spróbuj tego:

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

W moim kodu, testowanie przekazując argument ten nie działa, czas oczekiwania został zignorowany:

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

To działa, czas oczekiwania:

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

To jest do bani, że w3schools o tym nie wspomina.

Kredyty dostępne są pod adresem: makemineatriple.com.

Mamy nadzieję, że pomoże to komuś, kto tu przyjdzie.

Marty

Answer 7

Omu Jak podkreślił, należy ustawić ostrość w dokumencie gotowej funkcji. jQuery zapewnia to za Ciebie. I wybierz na id. Na przykład, jeśli masz stronę logowania:

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

Answer 8

To działa podczas ładowania strony.

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

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

najbardziej błędu są bo u używać niewłaściwy obiekt ustawić prorepty lub funkcję. Użyj console.log (new_fild); aby zobaczyć, do jakiego obiektu U próbujesz ustawić prorepty lub funkcję.