Zajmuję się tworzeniem webapp przy użyciu jQuery. Mam funkcjonalność, która dodaje nowy wiersz z 3 pól wejściowych. Po utworzeniu tych elementów DOM chcę skupić się na jednym z pól wejściowych. Robię to, wywołując funkcję fokusu jQuery na wymaganym polu wejściowym.jQuery focus() czasami nie działa w IE8
Problem polega na tym, że wywoływanie fokusa() działa poprawnie w IE6 i FF3.5, ale nie działa w IE8.
Próbowałem zrobić prosty przykład tego problemu, aby go wyświetlić tutaj, ale z usuniętą wersją kodu fokusa() działa dobrze. Zgaduję więc, że DOM nie jest jeszcze gotowy, gdy zadzwonię focus() w IE8. Do tego próbowałem wywoływać setTimeout ("myFocus()", 400). Odniosłem sukces i w niektórych przypadkach fokus naprawdę działał, ale nadal nie zawsze. Losowo nie koncentruje się moje pole wejściowe.
Pytanie brzmi: czy ktokolwiek napotkał podobne problemy i czy ktoś ma pojęcie, jak go obejść? Używanie setTimeout wydaje się bardzo brzydkim obejściem.
Tnx z góry
Zmieniano: 26.08.2009
udało się odtworzyć na prostym przykładzie. Oto kod HTML + JS, który odtwarza ten błąd w IE8.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function performChanged() {
formChanged = true;
}
function handleChange() {
var parentDiv = $('#container');
newValue = $(html).html();
parentDiv.html(newValue);
$(".sel1",parentDiv).bind('change',handleChange);
//alert('Uncomment this and after alert focus will be on input');
$("input.cv_values",parentDiv).focus();
}
$(document).ready(function() {
$('.trackChange').bind('change', handleChange);
});
var html = '<div class=\"div1\">\n<select class=\"sel1\" id=\"sel1\" name=\"sel1\"><option value=\"\"><\/option>\n<option value=\"11\">Select me to see problem<\/option>\n<\/select>\n\n\n<input class=\"cv_values\" id=\"sel3\" name=\"sel3\" size=\"30\" type=\"text\" value=\"\" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>';
</script>
</head>
<body>
<select class="trackChange" onchange='performChanged();'>
<option value=""></option>
<option value="1" >Select me to generate new inputs</option>
</select>
<div id="container"></div>
</body>
Aby odtworzyć: 1) wybierz wartość z pierwszej listy rozwijanej. Zobaczysz, że dane wejściowe po raz pierwszy działają 2) wybierz wartość z drugiego menu rozwijanego. Zobaczysz, że błąd jest powielany.
Następnie w kodzie możesz skomentować linię, w której wyświetla alert JS(). Dziwne jest to, że jeśli jest to alert(), to po jego skupieniu działa dobrze.
Mam nadzieję, że pomoże to zrozumieć, gdzie jest mój problem.
P.S. Potrzebuję mojej aplikacji do pracy w ten sposób - regeneruje ona te wejścia po wybraniu wartości z rozwijanego menu. To jest uproszczony przykład mojej aplikacji;).
opublikuj fragment kodu. ułatwia to. – krishna
Czy próbowałeś skupić się na zdarzeniu "load" okna (nie na "DOMContentLoaded", a.k.a. - 'document.ready (...)' - one)? – kangax