jQuery UI - 对话框内的按钮不断获得焦点

Question

所以我有一个 jQuery UI 对话框，里面有一些按钮（完整示例在这里 => http://jsfiddle.net/VLr5G/3/）：

<div id="test">
    <button>Btn 1</button>
    <button>Btn 2</button>
    <button>Btn 3</button>
</div>

我想要做的是强制将焦点放在“关闭”按钮上 - 我尝试在对话框打开时应用以下代码：

open: function() {
    $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}

不幸的是，焦点总是在对话框中的第一个按钮上。这是一个错误，还是我错过了什么？

非常感谢您的帮助！

更新

好的，Stanley 的答案适用于我的第一个示例...但是尝试更改 jQuery UI 的版本 => http://jsfiddle.net/VLr5G/10/

就我目前所能找到的而言，它一直有效到 jQuery UI 1.10.0。

Answer 1

您没有正确获得关闭按钮。 你应该这样做：

$(document).ready(function() {
    $('#test').dialog({
        buttons: {
            'Close': function() {$(this).dialog('close');}
        },
        open: function() {
            $(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
        }
    });
});

工作 jsfiddle：http://jsfiddle.net/GG7EP/2/

更新 要使其适用于 jQuery 1.10.0 或更高版本，请在 focus 事件中调用按钮的焦点函数

$(document).ready(function() {
    $('#test').dialog({
        buttons: {
            'Close': function() {$(this).dialog('close');}
        },
        focus: function() {
            $(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
        }
    });
});

JsFiddle：http://jsfiddle.net/V3P4t/