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

Question

我有一个包含单字段表单的 jQuery UI 对话框，并且 autoOpen 属性在开始时设置为 false。页面上还有另一个 jQuery UI 菜单，对话框的打开功能绑定(bind)到菜单项的单击事件。当通过单击菜单项打开对话框时，我一直试图将焦点设置到对话框的唯一表单字段，但不幸的是。为了查明原因，我还添加了另一个测试按钮，通过单击该按钮，我可以将焦点设置到表单字段。所以我很确定是 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 的菜单以某种方式影响了焦点。我正在查看您的 fiddle ，我发现即使您将焦点延迟 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/