Невозможно установить фокус на поле формы в диалоговом окне пользовательского интерфейса jQuery при нажатии на элемент меню jQuery UI

Question

У меня есть диалоговое окно jQuery UI, содержащее форму с одним полем, и свойство autoOpen в начале имеет значение false. На странице есть еще одно меню пользовательского интерфейса jQuery, и функция открытия диалогового окна привязывается к событию щелчка пунктов меню. Я пытался установить фокус на единственном поле формы диалогового окна, когда диалоговое окно открыто по щелчку пунктов меню как-то не повезло. Чтобы точно определить причину, я также добавил еще одну кнопку тестирования и, нажав эту кнопку, я могу установить фокус на поле формы. Так что я уверен, что меню jQuery UI мешает фокусировке поля. Интересно, могу ли я обойти это ограничение? Любое понимание приветствуется. Спасибо!

HTML:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
</br>
<button id="btn">Open the dialog</button>

<div id="dialog" title="Basic dialog">
    <form>
        <input type="text" id="fld" />
    </form>
</div>

JavaScript:

$( "#dialog" ).dialog({
    autoOpen: false,
    open: function(event, ui){
        $('#fld').focus();
    }
});

$('#btn').click(function(e){
    $( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
    $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu({
    select: function( event, ui ) {
        $( "#dialog" ).dialog('open');
    }
});

Вот JS Fiddle

Answer 1

Интересно.

Меню jQuery как-то влияет на фокусировку. Я смотрел на вашу скрипку и обнаружил, что даже если вы задержите фокус на 1 миллисекунду, это сработает.

Взгляните на это.

$( "#dialog" ).dialog({
   autoOpen: false,
   open: function(event, ui){
       setTimeout(function(){$('#fld').focus();},1);
   }
});

$('#btn').click(function(e){
   $( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
   $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu();

http://jsfiddle.net/XMEWu/1/

Answer 2

Этот сводил меня с ума. Вот что исправило это для меня (более общая версия ответа @Trevor).

$('#element').dialog({
  open: function () {                        
    //focus fix
    $('textarea, input', $(this)).click(function() {
        var $inp = $(this);
        setTimeout(function () {
            $inp.focus();
        }, 1);
    });                        
  }
});

Answer 3

Использовать на странице диалога

$(window).load(function() {
   //Use Focus as $("#stsr").focus();
}