将焦点设置在具有多个jQuery UI模式对话框的页面中的表单元素上

Question

上下文

我有一个包含多个jQuery模式的页面。每个模态都包含一个表单。所以你点击一个按钮，它打开这个模态，你输入一些东西，你关闭模态。

我正在使用Bootstrap和jQuery。

我想要什么

我希望在显示时将焦点设置在模态中的控件上。我正在使用自动对焦，它可以完美地用于打开的第一个模态。

问题

它仅适用于打开的第一个模态。当它关闭并打开一个新的时，自动对焦不起作用。

这是一些代码。所以我在页面上有一些这样的内容：

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#new-section">Create</button>
<!-- Modal -->
<div class="modal fade" id="new-section" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" &times; data-dismiss="modal"</button>
                <h3 class="modal-title">Plan</h3>
            </div>
            <div class="modal-body">
                
                <form action="http://nessy.local:8888/master_section/new_section" name="new_section" id="new_section" method="post" accept-charset="utf-8">
                <div class="form-group">
                   <label for="title">Title</label>
                   <input type="text" id="title" class="form-control" name="title" autofocus>
                 </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                <input class="btn btn-success" type="submit" value="Save" />
                <input type="hidden" name="master_section_id" value="2">
                </form>
            </div>
        </div>
    </div>
</div>

感谢您的帮助！