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

Question

我有一个包含单字段表单的jQuery UI对话框,autoOpen属性在开头设置为false.页面上还有另一个jQuery UI菜单,对话框的open函数绑定到菜单项的click事件.我一直试图将焦点设置到对话框的唯一表单字段,当对话框打开时单击菜单项不知何故没有运气.为了查明原因,我还添加了另一个测试按钮,通过单击该按钮,我可以将焦点设置到表单域.所以我很确定这是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小提琴

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/