html - jQuery UI 选择事件后无法将焦点设置在输入字段上

Question

我正在使用 jQuery UI 选项卡在某些表单之间切换。
现在我需要focus()在单击选项卡时添加第一个输入字段。

如果我单击索引为 2 的选项卡，则会触发警报，但focus()不会触发。

  jQuery("#newRegistration").tabs({
    fx: { opacity: 'toggle', speed: 'fast' },
    select: function(event, ui) {
      if(ui.index == 0) { jQuery('#form1_name').focus(); }
      if(ui.index == 1) { jQuery('#form2_name').focus(); }
      if(ui.index == 2) { alert('this shows'); jQuery('#form3_name').focus(); }
    }
  });

为什么焦点不起作用？

表单数据如下所示（短版）：

<div id="registrationforms">
  <form id="form1_data_form" class="ui-tabs-hide" action="" method="post"></form>
  <form id="form2_data_form" class="ui-tabs-hide" action="" method="post"></form>

  <form id="form3_data_form" class="" action="http://mysite.com/register/" method="post">
    <input type="text" value="" maxlength="40" name="form3_name" id="form3_name">
  </form>
</div>

Answer 1

使用show事件而不是select事件。

jQuery("#newRegistration").tabs({
    fx: { opacity: 'toggle', speed: 'fast' },
    show: function(event, ui) {
      if(ui.index == 0) { jQuery('#form1_name').focus(); }
      if(ui.index == 1) { jQuery('#form2_name').focus(); }
      if(ui.index == 2) { alert('this shows'); jQuery('#form3_name').focus(); }
    }
});

现场示例 - http://jsfiddle.net/HN9uK/。