单击 jQueryUI 菜单项时无法将焦点设置到 jQuery UI 对话框中的表单字段

我有一个包含单字段表单的 jQuery UI 对话框，并且 autoOpen 属性一开始就设置为 false。页面上还有另一个 jQuery UI 菜单，对话框的打开函数绑定到菜单项的单击事件。当单击菜单项打开对话框时，我一直试图将焦点设置到对话框的唯一表单字段，但不知何故没有运气。为了查明原因，我还添加了另一个测试按钮，通过单击该按钮，我可以将焦点设置到表单字段。所以我很确定是 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');
    }
});

这里是jsfiddle http://jsfiddle.net/aarryy/beasx/5/

有趣的。

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/ http://jsfiddle.net/XMEWu/1/