jquery-ui - 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/